How to use scroll-into-view - 10 common examples

scrollToAnchor (anchor) {
      if (!this.$route) {
        return
      }
      anchor = anchor || this.$route.query.anchor
      if (!anchor) {
        return
      }
      let node = document.querySelector(`[data-anchor=${anchor}]`)
      if (!node) {
        return
      }
      scrollIntoView(node, {
        time: 400,
        align: {
          top: 0,
        },
      })
    },
  },

const scrollToAnchor = (anchorName, config={}) => {
  if (anchorName) {

    let anchorElement = document.getElementById(anchorName)
    if (anchorElement) { scrollToView(anchorElement, config) }
  }
}

eventChannel(emitter => {
      scrollIntoView(
        element,
        {
          align: {
            top: 0.1,
            left: 0,
            topOffset: 25,
            leftOffset: 0,
          },
        },
        () => {
          emitter(END)
        }
      )

      return () => {}
    })

handleScrollToElement = () => {
        ScrollIntoView(ReactDOM.findDOMNode(this.createCollectionRef.current), {align: {top: 1}})
    }

_scrollToBottom(e){
    if(e){
      e.preventDefault();
    }
    this._setInitialTop();
    scrollIntoView( this.refs.bottom);
    this._onLogScroll();
  },
  _onLineSelect(event){

scrollThumbIntoView = () => {
    if (this.scrollIntoViewElement && this.scrollIntoViewElement.current !== null) {
      scrollIntoView(this.scrollIntoViewElement.current, {
        time: 300,
        align: {
          left: 0.5,
        }
      });
    }
  };

onClick={() => {
          const scroller = overflow.current
          const clientWidth = scroller.clientWidth
          const target = Array.from(scroller.children).find(element => {
            const { left } = element.getBoundingClientRect()
            return left + clientWidth >= 0
          })
          scrollIntoView(target, {
            time: 400,
            align: {
              left: 0,
              leftOffset: TILE_MARGIN_RIGHT,
              ...getTop()
            }
          })
        }}
      >

React.useEffect(() => {
    if (textarea) {
      textarea.focus()

      if (window.innerWidth < mBreakPoint) {
        scrollIntoView(root.current, { align: { top: 0, topOffset: 60 } })
      }
    }
  }, [textarea])

componentDidUpdate(prevProps, prevState) {
    if(this.state.highlightRows){
      const keysAdded = R.difference(
                          R.keys(this.state.highlightRows),
                          R.keys(prevState.highlightRows)
                        )

      if (keysAdded.length){
        const key = R.last(keysAdded),
              row = ReactDOM.findDOMNode(this.refs[`row-${key}`])

        scrollIntoView(row, {time: 150, align: {top: 0, topOffset: 210}})
      }
    }
  }

componentDidUpdate(prevProps) {
        if (this.selectedRow && prevProps.selected !== this.props.selectedRow) {
            scrollIntoView(this.selectedRow);
        }
    }