0

Im trying to use scrollIntoView to scroll inside of a parent div but I get this following error 'Property 'scrollIntoView' does not exist on type 'HTMLCollectionOf'.' I have a button that should scroll to the top of the div im currently selecting. Here is my following code :

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js">


const scrollToTop = () => {
    const element = document.getElementsByClassName("vendorCard");
    element.scrollIntoView()
    }
    
    
    <button
            onClick={scrollToTop}
            className="hidden"
            id="resetScroll"
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              padding: '10px',
              border: 'none !important'
            }}
            type="button"
          >
            <ArrowUpwardIcon />
            <p style={{ fontSize: '0.7em', fontWeight: '200' }}>BACK</p>
          </button>
    
    
</script>
Jordan
  • 25
  • 5
  • You’re getting a list of elements. Even if you iterate through each of them and invoke scrollIntView, that’s probably not what you want as only the last element in the collection will be scrolled to. You need to identify a single unique element to trigger the event. – Terry Oct 21 '22 at 17:14
  • @Terry What do you mean by "I'm getting a list of elements"? – Jordan Oct 21 '22 at 17:16
  • That’s what `getElementsByClassName` returns (see the duplicate question) – Terry Oct 21 '22 at 17:24

0 Answers0