How to scroll to an element

Question

I have a chat widget that pulls up an array of messages every time I scroll up  The problem I am facing now is the slider stays fixed at the top when messages load  I want it to focus on the last index element from the previous array  I figured out that I can make dynamic refs by passing index  but I would also need to know what kind of scroll function to use to achieve that    handleScrollToElement event        const tesNode   ReactDOM findDOMNode this refs test      if  some logic           scroll to testNode                    render          return          lt div gt           lt div ref  test  gt  lt  div gt         lt  div gt

User · Answer

Here is my solution  I put an invisible div inside main div and made its position absolute  Then set the top value to - header height  and set the ref on this div  Or you can just react that div with children method  It s working great so far   lt div className  quot position-relative quot  gt           lt div style   position  quot absolute quot   top  quot -80px quot   opacity 0  pointerEvents  none     ref  ref  gt  lt  div gt

User · Answer

React 16 8    Functional component const ScrollDemo        gt       const myRef   useRef null      const executeScroll        gt  myRef current scrollIntoView             run this function from an event handler or an effect to execute scroll      return          lt  gt             lt div ref  myRef  gt Element to scroll to lt  div gt             lt button onClick  executeScroll  gt  Click to scroll  lt  button gt          lt   gt           Click here for a full demo on StackBlits React 16 3    Class component class ReadyToScroll extends Component       constructor props            super props          this myRef   React createRef                render             return  lt div ref  this myRef  gt Element to scroll to lt  div gt                executeScroll        gt  this myRef current scrollIntoView          run this method to execute scrolling      Class component - Ref callback class ReadyToScroll extends Component         render             return  lt div ref    ref    gt  this myRef ref   gt Element to scroll to lt  div gt              executeScroll        gt  this myRef scrollIntoView          run this method to execute scrolling       Don t use String refs  String refs harm performance  aren t composable  and are on their way out  Aug 2018    string refs have some issues  are considered legacy  and are likely to be removed in one of the future releases   Official React documentation   resource1resource2 Optional  Smoothe scroll animation    css    html       scroll-behavior  smooth     Passing ref to a child We want the ref to be attached to a dom element  not to a react component  So when passing it to a child component we can t name the prop ref  const MyComponent        gt        const myRef   useRef null      return  lt ChildComp refProp  myRef  gt  lt  ChildComp gt      Then attach the ref prop to a dom element  const ChildComp    props    gt        return  lt div ref  props refProp    gt

User · Answer

I had a simple scenario  When user clicks on the menu item in my Material UI Navbar I want to scroll them down to the section on the page  I could use refs and thread them through all the components but I hate threading props props multiple components because that makes code fragile   I just used vanilla JS in my react component  turns out it works just fine  Placed an ID on the element I wanted to scroll to and in my header component I just did this   const scroll        gt      const section   document querySelector    contact-us       section scrollIntoView    behavior   smooth   block   start

User · Answer

Jul 2019 - Dedicated hook function A dedicated hook function can hide implementation details  and provides a simple API to your components  React 16 8   Functional Component const useScroll        gt      const elRef   useRef null     const executeScroll        gt  elRef current scrollIntoView       return  executeScroll  elRef       Use it in any functional component  const ScrollDemo        gt        const  executeScroll  elRef    useScroll       useEffect executeScroll         Runs after component mounts          return  lt div ref  elRef  gt Element to scroll to lt  div gt      full demo React 16 3   class Component const utilizeScroll        gt      const elRef   React createRef      const executeScroll        gt  elRef current scrollIntoView       return   executeScroll  elRef        Use it in any class component  class ScrollDemo extends Component     constructor props        super props       this elScroll   utilizeScroll           componentDidMount         this elScroll executeScroll           render        return  lt div ref  this elScroll elRef  gt Element to scroll to lt  div gt           Full demo

User · Answer

You can use something like componentDidUpdate  componentDidUpdate       var elem   testNode   your ref to the element say testNode in your case     elem scrollTop   elem scrollHeight

User · Answer

You can now use useRef from react hook API  https   reactjs org docs hooks-reference html useref  declaration  let myRef   useRef     component   lt div ref  myRef  gt My Component lt  div gt    Use  window scrollTo   behavior   smooth   top  myRef current offsetTop

User · Answer

Just a heads up  I couldn t get these solutions to work on Material UI components  Looks like they don t have the current property   I just added an empty div amongst my components and set the ref prop on that

User · Answer

I used this inside a onclick function to scroll smoothly to a div where its id is  quot step2Div quot   let offset   100  window scrollTo       behavior   quot smooth quot       top      document getElementById  quot step2Div quot   getBoundingClientRect   top -     document body getBoundingClientRect   top -     offset

User · Answer

If you want to do it on page load you can use useLayoutEffect  and useRef  import React    useRef  useLayoutEffect   from  react   const ScrollDemo        gt        const myRef   useRef null      useLayoutEffect      gt          window scrollTo           behavior   quot smooth quot           top  myRef current offsetTop                    myRef current        return          lt  gt             lt div ref  myRef  gt I wanna be seen lt  div gt         lt   gt

User · Answer

this worked for me   this anyRef current scrollIntoView   behavior   smooth   block   start       EDIT  I wanted to expand on this based on the comments   const scrollTo    ref    gt      if  ref      other conditions           ref scrollIntoView   behavior   smooth   block   start             lt div ref  scrollTo  gt Item lt  div gt

User · Answer

What worked for me   class MyComponent extends Component       constructor props            super props           this myRef   React createRef       Create a ref                   Scroll to ref function     scrollToMyRef        gt            window scrollTo               top this myRef offsetTop                  behavior   smooth     optional                            On component mount  scroll to ref     componentDidMount             this scrollToMyRef                  Render method  Note  that  div  element got  ref       render             return                lt div ref  this myRef  gt My component lt  div gt

User · Answer

In order to automatically scroll into the particular element  first need to select the element using  document getElementById and then we need to scroll using scrollIntoView    Please refer the below code     scrollToElement  async     gt         document getElementById  id001   scrollIntoView            The above approach worked for me

User · Answer

Just find the top position of the element you ve already determined https   www w3schools com Jsref prop element offsettop asp then scroll to this position via scrollTo method https   www w3schools com Jsref met win scrollto asp  Something like this should work   handleScrollToElement event      const tesNode   ReactDOM findDOMNode this refs test    if  some logic       window scrollTo 0  tesNode offsetTop          render        return        lt div gt         lt div ref  test  gt  lt  div gt       lt  div gt       UPDATE   since React v16 3 the React createRef   is preferred  constructor props      super props     this myRef   React createRef       handleScrollToElement event      if   lt some logic gt        window scrollTo 0  this myRef current offsetTop          render        return        lt div gt         lt div ref  this myRef  gt  lt  div gt       lt  div gt

User · Answer

You can also use scrollIntoView method to scroll to a given element    handleScrollToElement event    const tesNode   ReactDOM findDOMNode this refs test   if  some logic     tesNode scrollIntoView             render       return       lt div gt        lt div ref  test  gt  lt  div gt      lt  div gt

User · Answer

I might be late to the party but I was trying to implement dynamic refs to my project the proper way and all the answer I have found until know aren t quiet satisfying to my liking  so I came up with a solution that I think is simple and uses the native and recommended way of react to create the ref   sometimes you find that the way documentation is wrote assumes that you have a known amount of views and in most cases this number is unknown so you need a way to solve the problem in this case  create dynamic refs to the unknown number of views you need to show in the class  so the most simple solution i could think of and worked flawlessly was to do as follows  class YourClass extends component    state    foo  bar    dynamicViews      myData      get some data from the web    inputRef   React createRef    componentDidMount      this createViews       createViews       gt   const trs    for  let i   1  i  lt  this state myData lenght  i       let ref   myrefRow   i    this ref   React createRef      const row        lt tr ref  this ref   gt   lt td gt     myRow   i    lt  td gt   lt  tr gt    trs push row     this setState  dynamicViews trs      clickHandler       gt      const scrollToView   this inputRef current value   That to select the value of the inputbox bt for demostrate the   example  value  myrefRow   30      this value  current scrollIntoView   behavior   smooth   block   start          render     return   lt div style   display  flex   flexDirection  column    gt   lt Button onClick  this clickHandler  gt  Search lt  Button gt   lt input ref  this inputRef   gt   lt table gt   lt tbody gt   this state dynamicViews   lt tbody gt   lt table gt   lt  div gt             export default YourClass   that way the scroll will go to whatever row you are looking for    cheers and hope it helps others

User · Answer

Here is the Class Component code snippet you can use to solve this problem   This approach used the ref and also scrolls smoothly to the target ref  import React    Component   from  react   export default class Untitled extends Component     constructor props        super props      this howItWorks   React createRef           scrollTohowItWorks        gt   window scroll       top  this howItWorks current offsetTop      left  0      behavior   smooth           render         return          lt div gt          lt button onClick       gt  this scrollTohowItWorks    gt How it works lt  button gt          lt hr  gt          lt div className  content  ref  this howItWorks  gt           Lorem ipsum dolor  sit amet consectetur adipisicing elit  Nesciunt placeat magnam accusantium aliquid tenetur aspernatur nobis molestias quam  Magnam libero expedita aspernatur commodi quam provident obcaecati ratione asperiores  exercitationem voluptatum          lt  div gt         lt  div gt

User · Answer

You could try this way    handleScrollToElement   e   gt        const elementTop   this gate offsetTop      window scrollTo 0  elementTop         render      return         lt h2 ref  elem   gt   this gate   elem   gt Payment gate lt  h2 gt

User · Answer

lt div onScrollCapture       gt  this  onScrollEvent    gt  lt  div gt     onScrollEvent    e   gt        const top   e nativeEvent target scrollTop       console log top

User · Answer

To anyone else reading this who didn t have much luck with the above solutions or just wants a simple drop-in solution  this package worked for me  https   www npmjs com package react-anchor-link-smooth-scroll  Happy Hacking

User · Answer

Follow these steps   1  Install   npm install react-scroll-to --save   2  Import the package   import   ScrollTo   from  react-scroll-to     3  Usage   class doc extends Component     render         return         lt ScrollTo gt              scroll      gt               lt a onClick       gt  scroll   x  20  y  500    smooth  true     gt Scroll to Bottom lt  a gt                    lt  ScrollTo gt

User · Answer

After reading through manny forums found a really easy solution  I use redux-form  Urgo mapped redux-from fieldToClass  Upon error I navigate to the first error on the list of syncErrors  No refs and no third party modules  Just simple querySelector  amp  scrollIntoView handleToScroll    field    gt         const fieldToClass              vehicleIdentifier    VehicleIdentifier            locationTags    LocationTags            photos    dropzoneContainer            description    DescriptionInput            clientId    clientId            driverLanguage    driverLanguage            deliveryName    deliveryName            deliveryPhone    deliveryPhone            quot deliveryEmail quot    deliveryEmail            quot pickupAndReturn quot    quot PickupAndReturn quot            quot payInCash quot    quot payInCash quot          document  querySelector     fieldToClasses field               scrollIntoView   behavior   quot smooth quot

User · Answer

Using findDOMNode is going to be deprecated eventually    The preferred method is to use callback refs   github eslint

User · Answer

The nicest way is to use element scrollIntoView   behavior   smooth      This scrolls the element into view with a nice animation  When you combine it with React s useRef    it can be done the following way  import React    useRef   from  react   const Article        gt      const titleRef   useRef      function handleBackClick           titleRef current scrollIntoView   behavior   smooth            return          lt article gt               lt h1 ref  titleRef  gt                  A React article for Latin readers              lt  h1 gt                  Rest of the article s content                  lt button onClick  handleBackClick  gt                  Back to the top              lt  button gt           lt  article gt           When you would like to scroll to a React component  you need to forward the ref to the rendered element  This article will dive deeper into the problem

[javascript] How to scroll to an element?

Examples related to javascript

Examples related to reactjs

Examples related to ecmascript-6