Smooth scroll to specific div on click

Question

What I m trying to do is make it so that if you click on a button  it scrolls down  smoothly  to a specific div on the page   What I need is if you click on the button  it smooth scrolls to the div  second     x000D   x000D   first   x000D      width  100   x000D      height  1000px  x000D      background   ccc  x000D    x000D   x000D   second   x000D      width  100   x000D      height  1000px  x000D      background   999  x000D    x000D   lt div class  first  gt  lt button type  button  gt Click Me  lt  button gt  lt  div gt  x000D   lt div class  second  gt Hi lt  div gt  x000D   x000D   x000D

User · Accepted Answer

do      button   click function            html body   animate           scrollTop      second   offset   top            slow          Updated Jsfiddle

User · Answer

There are many examples of smooth scrolling using JS libraries like jQuery  Mootools  Prototype  etc   The following example is on pure JavaScript  If you have no jQuery Mootools Prototype on page or you don t want to overload page with heavy JS libraries the example will be of help   http   jsfiddle net rjSfP   HTML Part    lt div class  first  gt  lt button type  button  onclick  smoothScroll document getElementById  second     gt Click Me  lt  button gt  lt  div gt   lt div class  second  id  second  gt Hi lt  div gt    CSS Part    first       width  100       height  1000px      background   ccc      second       width  100       height  1000px      background   999      JS Part   window smoothScroll   function target        var scrollContainer   target      do     find scroll container         scrollContainer   scrollContainer parentNode          if   scrollContainer  return          scrollContainer scrollTop    1        while  scrollContainer scrollTop    0        var targetY   0      do     find the top of target relatively to the container         if  target    scrollContainer  break          targetY    target offsetTop        while  target   target offsetParent        scroll   function c  a  b  i            i    if  i  gt  30  return          c scrollTop   a    b - a    30   i          setTimeout function    scroll c  a  b  i      20                start scrolling     scroll scrollContainer  scrollContainer scrollTop  targetY  0

User · Answer

You can use basic css to achieve smooth scroll html     scroll-behavior  smooth

User · Answer

What if u use scrollIntoView function   var elmntToView   document getElementById  sectionId    elmntToView scrollIntoView       Has  behavior   smooth   too        https   developer mozilla org en-US docs Web API Element scrollIntoView

User · Answer

I played around with nico s answer a little and it felt jumpy  Did a bit of investigation and found window requestAnimationFrame which is a function that is called on each repaint cycle  This allows for a more clean-looking animation  Still trying to hone in on good default values for step size but for my example things look pretty good using this implementation   var smoothScroll   function elementId        var MIN PIXELS PER STEP   16      var MAX SCROLL STEPS   30      var target   document getElementById elementId       var scrollContainer   target      do           scrollContainer   scrollContainer parentNode          if   scrollContainer  return          scrollContainer scrollTop    1        while  scrollContainer scrollTop    0        var targetY   0      do           if  target    scrollContainer  break          targetY    target offsetTop        while  target   target offsetParent        var pixelsPerStep   Math max MIN PIXELS PER STEP                                    targetY - scrollContainer scrollTop    MAX SCROLL STEPS        var stepFunc   function             scrollContainer scrollTop               Math min targetY  pixelsPerStep   scrollContainer scrollTop            if  scrollContainer scrollTop  gt   targetY                return                     window requestAnimationFrame stepFunc               window requestAnimationFrame stepFunc

User · Answer

I took the Ned Rockson s version and adjusted it to allow upwards scrolls as well   var smoothScroll   function elementId      var MIN PIXELS PER STEP   16    var MAX SCROLL STEPS   30    var target   document getElementById elementId     var scrollContainer   target    do       scrollContainer   scrollContainer parentNode      if   scrollContainer  return      scrollContainer scrollTop    1      while  scrollContainer scrollTop     0      var targetY   0    do       if  target     scrollContainer  break      targetY    target offsetTop      while  target   target offsetParent      var pixelsPerStep   Math max MIN PIXELS PER STEP      Math abs targetY - scrollContainer scrollTop    MAX SCROLL STEPS      var isUp   targetY  lt  scrollContainer scrollTop     var stepFunc   function         if  isUp          scrollContainer scrollTop   Math max targetY  scrollContainer scrollTop - pixelsPerStep         if  scrollContainer scrollTop  lt   targetY            return                else           scrollContainer scrollTop   Math min targetY  scrollContainer scrollTop   pixelsPerStep          if  scrollContainer scrollTop  gt   targetY            return                     window requestAnimationFrame stepFunc           window requestAnimationFrame stepFunc

User · Answer

Ned Rockson basically answers this question  However there is a fatal flaw within his solution  When the targeted element is closer to the bottom of the page than the viewport-height  the function doesn t reach its exit statement and traps the user on the bottom of the page  This is simply solved by limiting the iteration count  var smoothScroll   function elementId        var MIN PIXELS PER STEP   16      var MAX SCROLL STEPS   30      var target   document getElementById elementId       var scrollContainer   target      do           scrollContainer   scrollContainer parentNode          if   scrollContainer  return          scrollContainer scrollTop    1        while  scrollContainer scrollTop    0        var targetY   0      do           if  target    scrollContainer  break          targetY    target offsetTop        while  target   target offsetParent        var pixelsPerStep   Math max MIN PIXELS PER STEP                                    targetY - scrollContainer scrollTop    MAX SCROLL STEPS        var iterations   0      var stepFunc   function             if iterations  gt  MAX SCROLL STEPS               return                    scrollContainer scrollTop               Math min targetY  pixelsPerStep   scrollContainer scrollTop            if  scrollContainer scrollTop  gt   targetY                return                     window requestAnimationFrame stepFunc               window requestAnimationFrame stepFunc

[javascript] Smooth scroll to specific div on click

Examples related to javascript

Examples related to jquery