Smooth scroll without the use of jQuery

Question

I m coding up a page where I only want to use raw JavaScript code for UI without any interference of plugins or frameworks   And now I m struggling with finding a way to scroll over the page smoothly without jQuery

User · Answer

Here is my solution  Works in most browsers  document getElementById  scrollHere   scrollIntoView  behavior   smooth       Docs   x000D   x000D  document getElementById  end   scrollIntoView  behavior   smooth     x000D  body  margin  0px  display  block  height  100   background-image  linear-gradient red  yellow    x000D   start  display  block  margin  100px 10px 1000px 0px   x000D   end  display  block  margin  0px 0px 100px 0px   x000D   lt div class  start  gt Start lt  div gt  x000D   lt div class  end  id  end  gt End lt  div gt  x000D   x000D   x000D

User · Answer

edit  this answer has been written in 2013  Please check Cristian Tra  na s comment below about requestAnimationFrame  I made it  The code below doesn t depend on any framework   Limitation   The anchor active is not written in the url   Version of the code   1 0    Github   https   github com Yappli smooth-scroll   function      Code in a function to create an isolate scope   var speed   500  var moving frequency   15     Affects performance   var links   document getElementsByTagName  a    var href  for var i 0  i lt links length  i             href    links i  attributes href     undefined    null   links i  attributes href nodeValue toString        if href     null  amp  amp  href length  gt  1  amp  amp  href substr 0  1                        links i  onclick   function                         var element              var href   this attributes href nodeValue toString                if element   document getElementById href substr 1                                  var hop count   speed moving frequency                 var getScrollTopDocumentAtBegin   getScrollTopDocument                    var gap    getScrollTopElement element  - getScrollTopDocumentAtBegin    hop count                   for var i   1  i  lt   hop count  i                                           function                                                 var hop top position   gap i                          setTimeout function     window scrollTo 0  hop top position   getScrollTopDocumentAtBegin      moving frequency i                                                                          return false                      var getScrollTopElement    function  e        var top   0       while  e offsetParent    undefined  amp  amp  e offsetParent    null                top    e offsetTop    e clientTop    null   e clientTop   0           e   e offsetParent             return top      var getScrollTopDocument   function         return document documentElement scrollTop   document body scrollTop

User · Answer

Here s the code that worked for me       a href               not   href             not   href   0          click function event         if          location pathname replace               this pathname replace                    amp  amp         location hostname    this hostname                var target     this hash     target   target length   target       name     this hash slice 1            if  target length         event preventDefault           html  body   animate         scrollTop  target offset   top        1000  function            var  target     target          target focus          if   target is   focus               return false          else            target attr  tabindex   -1              target focus

User · Answer

Modern browsers has support for CSS  scroll-behavior  smooth  property  So  we even don t need any Javascript at all for this  Just add this to the body element  and use usual anchors and links  scroll-behavior MDN docs

User · Answer

Native browser smooth scrolling in JavaScript is like this      scroll to specific values     same as window scroll   method     for scrolling a particular distance  use window scrollBy    window scroll     top  2500     left  0     behavior   smooth           scroll certain amounts from current position  window scrollBy      top  100     negative value acceptable   left  0     behavior   smooth           scroll to a certain element document querySelector   hello   scrollIntoView      behavior   smooth

User · Answer

With using the following smooth scrolling is working fine    x000D   x000D  html   x000D    scroll-behavior  smooth  x000D    x000D   x000D   x000D

User · Answer

You can use a for loop with window scrollTo and setTimeout to scroll smoothly with plain Javascript  To scroll to an element with my scrollToSmoothly function  scrollToSmoothly elem offsetTop   assuming elem is a DOM element   You can use this to scroll smoothly to any y-position in the document   function scrollToSmoothly pos  time     Time is only applicable for scrolling upwards     Code written by hev1     pos is the y-position to scroll to  in pixels         if isNaN pos          throw  Position must be a number               if pos lt 0        throw  Position can not be negative              var currentPos   window scrollY  window screenTop      if currentPos lt pos       var t   10         for let i   currentPos  i  lt   pos  i  10          t  10          setTimeout function            window scrollTo 0  i              t 2                 else       time   time    2         var i   currentPos         var x        x   setInterval function             window scrollTo 0  i            i -  10           if i lt  pos             clearInterval x                      time               Demo    x000D   x000D   lt button onClick  scrollToDiv    gt Scroll To Element lt  button gt  x000D   lt div style  margin  1000px 0px  text-align  center   gt Div element lt p  gt  x000D   lt button onClick  scrollToSmoothly Number 0    gt Scroll back to top lt  button gt  x000D   lt  div gt  x000D   lt script gt  x000D  function scrollToSmoothly pos  time   x000D    Time is only applicable for scrolling upwards   x000D    Code written by hev1   x000D    pos is the y-position to scroll to  in pixels    x000D       if isNaN pos    x000D        throw  Position must be a number   x000D         x000D       if pos lt 0   x000D       throw  Position can not be negative   x000D         x000D      var currentPos   window scrollY  window screenTop  x000D      if currentPos lt pos   x000D      var t   10  x000D         for let i   currentPos  i  lt   pos  i  10   x000D         t  10  x000D          setTimeout function    x000D         window scrollTo 0  i   x000D             t 2   x000D          x000D        else   x000D      time   time    2  x000D         var i   currentPos  x000D         var x  x000D        x   setInterval function    x000D           window scrollTo 0  i   x000D           i -  10  x000D           if i lt  pos   x000D            clearInterval x   x000D             x000D          time   x000D          x000D    x000D  function scrollToDiv    x000D    var elem   document querySelector  div    x000D    scrollToSmoothly elem offsetTop   x000D    x000D   lt  script gt  x000D   x000D   x000D

User · Answer

You can use  document querySelector  your-element   scrollIntoView  behavior   smooth       If you want to scroll top the top of the page  you can just place an empty element in the top  and smooth scroll to that one

User · Answer

lt script gt  var set   0   function animatescroll x  y        if  set    0            var val72   0          var val73   0          var setin   0          set   1           var interval   setInterval function                 if  setin    0                    val72                    val73    x   1000                  if  val72    1000                        val73   0                      interval   clearInterval interval                                     document getElementById y  scrollTop   val73                           1            lt  script gt    x   scrollTop y   id of the div that is used to scroll  Note   For making the body to scroll give the body an ID

User · Answer

I recently set out to solve this problem in a situation where jQuery wasn t an option  so I m logging my solution here just for posterity   var scroll    function          var elementPosition   function a            return function                 return a getBoundingClientRect   top                         var scrolling   function  elementID              var el   document getElementById  elementID                elPos   elementPosition  el                duration   400              increment   Math round  Math abs  elPos     40                time   Math round  duration increment                prev   0              E           function scroller                 E   elPos                 if  E     prev                    return                else                   prev   E                             increment    E  gt  -20  amp  amp  E  lt  20      E  gt  - 5  amp  amp  E  lt  5    1   5    increment               if  E  gt  1    E  lt  -1                     if  E  lt  0                        window scrollBy  0 -increment                      else                       window scrollBy  0 increment                                       setTimeout scroller  time                  else                    el scrollTo  0 0                                      scroller                return           To  scrolling                  usage    scroll To  elementID      The scroll   function uses the Revealing Module Pattern to pass the target element s id to its scrolling   function  via scroll To  id    which sets the values used by the scroller   function   Breakdown  In scrolling      el    the target DOM object elPos    returns a function via elememtPosition   which gives the position of the target element relative to the top of the page each time it s called  duration    transition time in milliseconds  increment    divides the starting position of the target element into 40 steps  time    sets the timing of each step  prev    the target element s previous position in scroller    E   holds the target element s position in scroller      The actual work is done by the scroller   function which continues to call itself  via setTimeout    until the target element is at the top of the page or the page can scroll no more   Each time scroller   is called it checks the current position of the target element  held in variable E  and if that is  gt  1 OR  lt  -1 and if the page is still scrollable shifts the window by increment pixels - up or down depending if E is a positive or negative value   When E is neither  gt  1 OR  lt  -1  or E     prev the function stops   I added the DOMElement scrollTo   method on completion just to make sure the target element was bang on the top of the window  not that you d notice it being out by a fraction of a pixel     The if statement on line 2 of scroller   checks to see if the page is scrolling   in cases where the target might be towards the bottom of the page and the page can scroll no further  by checking E against its previous position  prev      The ternary condition below it reduce the increment value as E approaches zero   This stops the page overshooting one way and then bouncing back to overshoot the other  and then bouncing back to overshoot the other again  ping-pong style  to infinity and beyond    If your page is more that c 4000px high you might want to increase the values in the ternary expression s first condition  here at   -20  and or the divisor which sets the increment value  here at 40    Playing about with duration  the divisor which sets increment  and the values in the ternary condition of scroller   should allow you to tailor the function to suit your page    JSFiddle N B Tested in up-to-date versions of Firefox and Chrome on Lubuntu  and Firefox  Chrome and IE on Windows8

User · Answer

You can also use Scroll Behaviour Property   for example add below line to your css    x000D   x000D  html  x000D  scroll-behavior smooth  x000D    x000D   x000D   x000D    and this will result a native smooth scrolling feature   Read More about Scroll behavior

User · Answer

Algorithm  Scrolling an element requires changing its scrollTop value over time  For a given point in time  calculate a new scrollTop value  To animate smoothly  interpolate using a smooth-step algorithm   Calculate scrollTop as follows   var point   smooth step start time  end time  now   var scrollTop   Math round start top    distance   point      Where    start time is the time the animation started  end time is when the animation will end  start time   duration   start top is the scrollTop value at the beginning  and distance is the difference between the desired end value and the start value  target - start top     A robust solution should detect when animating is interrupted  and more  Read my post about Smooth Scrolling without jQuery for details   Demo  See the JSFiddle   Implementation  The code           Smoothly scroll element to the given target  element scrollTop      for the given duration      Returns a promise that s fulfilled when done  or rejected if     interrupted     var smooth scroll to   function element  target  duration        target   Math round target       duration   Math round duration       if  duration  lt  0            return Promise reject  bad duration              if  duration     0            element scrollTop   target          return Promise resolve               var start time   Date now        var end time   start time   duration       var start top   element scrollTop      var distance   target - start top          based on http   en wikipedia org wiki Smoothstep     var smooth step   function start  end  point            if point  lt   start    return 0            if point  gt   end    return 1            var x    point - start     end - start      interpolation         return x x  3 - 2 x              return new Promise function resolve  reject               This is to keep track of where the element s scrollTop is            supposed to be  based on what we re doing         var previous top   element scrollTop              This is like a think function from a game loop         var scroll frame   function                 if element scrollTop    previous top                    reject  interrupted                    return                                set the scrollTop for this frame             var now   Date now                var point   smooth step start time  end time  now               var frameTop   Math round start top    distance   point                element scrollTop   frameTop                  check if we re done              if now  gt   end time                    resolve                    return                                If we were supposed to scroll but didn t  then we                probably hit the limit  so consider it done  not                interrupted              if element scrollTop     previous top                  amp  amp  element scrollTop     frameTop                    resolve                    return                            previous top   element scrollTop                  schedule next frame for execution             setTimeout scroll frame  0                         boostrap the animation process         setTimeout scroll frame  0

User · Answer

I ve made an example without jQuery here   http   codepen io sorinnn pen ovzdq           by Nemes Ioan Sorin - not an jQuery big fan      therefore this script is for those who love the old clean coding style        id   the id of the element who need to bring  into view      Note   this demo scrolls about 12 700 pixels from Link1 to Link3     function           window setTimeout   window setTimeout                  var smoothScr           iterr   30     set timeout miliseconds   decreased with 1ms for each iteration         tm   null    timeout local variable       stopShow  function                   clearTimeout this tm      stopp the timeout         this iterr   30     reset milisec iterator to original value                getRealTop   function  el     helper function instead of jQuery                 var elm   el           var realTop   0          do                     realTop    elm offsetTop            elm   elm offsetParent                    while elm           return realTop                 getPageScroll   function       helper function instead of jQuery                 var pgYoff   window pageYOffset    document body scrollTop    document documentElement scrollTop          return pgYoff                 anim   function  id     the main func                 this stopShow       for click on another button or link         var eOff  pOff  tOff  scrVal  pos  dir  step           eOff   document getElementById id  offsetTop     element offsetTop          tOff    this getRealTop document getElementById id  parentNode      terminus point           pOff   this getPageScroll       page offsetTop          if  pOff     null    isNaN pOff     pOff      undefined   pOff   0           scrVal   eOff - pOff     actual scroll value           if  scrVal  gt  tOff                       pos    eOff - tOff - pOff              dir   1                    if  scrVal  lt  tOff                      pos    pOff   tOff  - eOff            dir   -1                     if scrVal     tOff                       step       pos   4   1    dir             if this iterr  gt  1  this iterr -  1             else this itter   0     decrease the timeout timer value but not below 0           window scrollBy 0  step             this tm   window setTimeout function                            smoothScr anim id                  this iterr                        if scrVal     tOff                        this stopShow       reset function values           return

User · Answer

I ve made something like this  I have no idea if its working in IE8  Tested in IE9  Mozilla  Chrome  Edge   function scroll toElement  speed      var windowObject   window    var windowPos   windowObject pageYOffset    var pointer   toElement getAttribute  href   slice 1     var elem   document getElementById pointer     var elemOffset   elem offsetTop     var counter   setInterval function         windowPos       if  windowPos  gt  elemOffset       from bottom to top       windowObject scrollTo 0  windowPos         windowPos -  speed         if  windowPos  lt   elemOffset       scrolling until elemOffset is higher than scrollbar position  cancel interval and set scrollbar to element position         clearInterval counter           windowObject scrollTo 0  elemOffset                 else      from top to bottom       windowObject scrollTo 0  windowPos         windowPos    speed         if  windowPos  gt   elemOffset       scroll until scrollbar is lower than element  cancel interval and set scrollbar to element position         clearInterval counter           windowObject scrollTo 0  elemOffset                       1        call example  var navPointer   document getElementsByClassName  nav  anchor     for  i   0  i  lt  navPointer length  i        navPointer i  addEventListener  click   function e        scroll this  18       e preventDefault              Description   pointer   get element and chceck if it has attribute  href  if yes  get rid of     elem   pointer variable without     elemOffset   offset of  scroll to  element from the top of the page

User · Answer

Try this smooth scrolling demo  or an algorithm like    Get the current top location using self pageYOffset Get the position of element till where you want to scroll to  element offsetTop Do a for loop to reach there  which will be quite fast or use a timer to do smooth scroll till that position using window scrollTo     See also the other popular answer to this question     Andrew Johnson s original code   function currentYPosition            Firefox  Chrome  Opera  Safari     if  self pageYOffset  return self pageYOffset         Internet Explorer 6 - standards mode     if  document documentElement  amp  amp  document documentElement scrollTop          return document documentElement scrollTop         Internet Explorer 6  7 and 8     if  document body scrollTop  return document body scrollTop      return 0      function elmYPosition eID        var elm   document getElementById eID       var y   elm offsetTop      var node   elm      while  node offsetParent  amp  amp  node offsetParent    document body            node   node offsetParent          y    node offsetTop        return y      function smoothScroll eID        var startY   currentYPosition        var stopY   elmYPosition eID       var distance   stopY  gt  startY   stopY - startY   startY - stopY      if  distance  lt  100            scrollTo 0  stopY   return            var speed   Math round distance   100       if  speed  gt   20  speed   20      var step   Math round distance   25       var leapY   stopY  gt  startY   startY   step   startY - step      var timer   0      if  stopY  gt  startY            for   var i startY  i lt stopY  i  step                 setTimeout  window scrollTo 0    leapY      timer   speed               leapY    step  if  leapY  gt  stopY  leapY   stopY  timer              return            for   var i startY  i gt stopY  i- step             setTimeout  window scrollTo 0    leapY      timer   speed           leapY -  step  if  leapY  lt  stopY  leapY   stopY  timer                Related links    https   www sitepoint com smooth-scrolling-vanilla-javascript  https   github com zengabor zenscroll blob dist zenscroll js https   github com cferdinandi smooth-scroll blob master src js smooth-scroll js https   github com alicelieutier smoothScroll blob master smoothscroll js

[javascript] Smooth scroll without the use of jQuery

Examples related to javascript

Examples related to html