Cross browser JavaScript not jQuery scroll to top animation

Question

I m looking for a simple  cross-browser  scroll to top  animation I can apply to a link  I don t want to require a JS library such as jQuery Moo  etc      jQuery Equivilant to convert to pure JS       html  body   animate  scrollTop 0   400     I m a perfect case for someone who should have learned JS 100  before jumping into a library

User · Answer

function scrollTo element  to  duration        if  duration  lt   0  return      var difference   to - element scrollTop      var perTick   difference   duration   10       setTimeout function             element scrollTop   element scrollTop   perTick          if  element scrollTop     to  return          scrollTo element  to  duration - 10          10       Demo    x000D   x000D  function runScroll     x000D    scrollTo document body  0  600   x000D    x000D  var scrollme  x000D  scrollme   document querySelector   scrollme    x000D  scrollme addEventListener  click  runScroll false  x000D   x000D  function scrollTo element  to  duration    x000D    if  duration  lt   0  return  x000D    var difference   to - element scrollTop  x000D    var perTick   difference   duration   10  x000D   x000D    setTimeout function     x000D      element scrollTop   element scrollTop   perTick  x000D      if  element scrollTop    to  return  x000D      scrollTo element  to  duration - 10   x000D       10   x000D    x000D   lt p gt Very long page Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page   Very long page Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page   Very long page Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page   Very long page Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page   Very long page Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  Very long page  x000D   lt  p gt  x000D   lt button id scrollme type  button  gt To the top lt  button gt  x000D   x000D   x000D

User · Answer

There is actually a pure javascript way to accomplish this without using setTimeout or requestAnimationFrame or jQuery.

In short, find the element in the scrollView that you want to scroll to, and use scrollIntoView

el.scrollIntoView({behavior:"smooth"});

Here is a plunkr.

User · Answer

I modified TimWolla s answer to use quadratic in-out easing   a little smoother     Here is an example in action  on jsFiddle  Easing functions are available here  Robert Penner s Easing functions  document getElementsByTagName  button   0  onclick   function          scrollTo document body  0  1250         function scrollTo element  to  duration        var start   element scrollTop          change   to - start          increment   20       var animateScroll   function elapsedTime                    elapsedTime    increment          var position   easeInOut elapsedTime  start  change  duration                                   element scrollTop   position           if  elapsedTime  lt  duration                setTimeout function                     animateScroll elapsedTime                  increment                         animateScroll 0      function easeInOut currentTime  start  change  duration        currentTime    duration   2      if  currentTime  lt  1            return change   2   currentTime   currentTime   start            currentTime -  1      return -change   2    currentTime    currentTime - 2  - 1    start

User · Answer

Linear scrolling animation to bottom  Pure JS  no JQuery  Maybe my solution will be helpful for someone    let action count   8  let speed ms   15  let objDiv   document getElementsByClassName  js y5 area3   item 0    let scroll height   objDiv scrollHeight  let window height   objDiv offsetHeight   let scroll top   objDiv scrollTop  let need scroll top   scroll height - window height   if  scroll top  lt  need scroll top        let step   Math ceil  need scroll top - scroll top    action count        let scrollInterval   setInterval function                 scroll top    step          objDiv scrollTop   scroll top           if  scroll top  gt   need scroll top                        clearInterval scrollInterval                     speed ms       You can change variables action count  speed ms to configure scrolling animation on your taste

User · Answer

Adapted from this answer   function scroll y  duration         var initialY   document documentElement scrollTop    document body scrollTop      var baseY    initialY   y    0 5      var difference   initialY - baseY      var startTime   performance now         function step             var normalizedTime    performance now   - startTime    duration          if  normalizedTime  gt  1  normalizedTime   1           window scrollTo 0  baseY   difference   Math cos normalizedTime   Math PI            if  normalizedTime  lt  1  window requestAnimationFrame step             window requestAnimationFrame step       This should allow you to smoothly scroll  cosine function  from anywhere to the specified  y

User · Answer

PURE JAVASCRIPT SCROLLER CLASS  This is an old question but I thought I could answer with some fancy stuff and some more options to play with if you want to have a bit more control over the animation   Cross-browser   Copy Paste ready solution  You only need CSS and JS    3 animate modes    normal   linear  false       Customize your animation with available settings - make it snappy or fluent   Double click to skip animation   Every next single click adds initial speed   Stop scroll animation by draging down the scroll bar   Stop scroll animation by mouse wheel down   Animated button fade-in-out on scroll  Here it is a pure JS Class to take care of the scrolling for you   SEE DEMO AT CODEPEN OR GO TO THE BOTTOM AND RUN THE SINPET     ------------------- USE EXAMPLE ---------------------     Set options var options        showButtonAfter   200     show button after scroling down this amount of px    animate    linear       false normal linear  - for false no aditional settings are needed     normal        applys only if  animate  normal  - set scroll loop distanceLeft steps ms      steps   20     the more steps per loop the slower animation gets      ms   10    the less ms the quicker your animation gets          linear        applys only if  animate  linear  - set scroll px ms      px   30     the more px the quicker your animation gets      ms   10    the less ms the quicker your animation gets                Create new Scroller and run it  var scroll   new Scroller options   scroll init      FULL CLASS SCRIPT   USE EXAMPLE    x000D   x000D     PURE JAVASCRIPT  OOP  x000D   x000D  function Scroller options    x000D    this options   options  x000D    this button   null  x000D    this stop   false  x000D    x000D   x000D  Scroller prototype constructor   Scroller  x000D   x000D  Scroller prototype createButton   function     x000D   x000D    this button   document createElement  button    x000D    this button classList add  scroll-button    x000D    this button classList add  scroll-button--hidden    x000D    this button textContent        x000D    document body appendChild this button   x000D    x000D   x000D  Scroller prototype init   function     x000D    this createButton    x000D    this checkPosition    x000D    this click    x000D    this stopListener    x000D    x000D   x000D  Scroller prototype scroll   function     x000D    if  this options animate    false    this options animate     false     x000D      this scrollNoAnimate    x000D      return  x000D      x000D    if  this options animate     normal     x000D      this scrollAnimate    x000D      return  x000D      x000D    if  this options animate     linear     x000D      this scrollAnimateLinear    x000D      return  x000D      x000D    x000D  Scroller prototype scrollNoAnimate   function     x000D    document body scrollTop   0  x000D    document documentElement scrollTop   0  x000D    x000D  Scroller prototype scrollAnimate   function     x000D    if  this scrollTop    gt  0  amp  amp  this stop    false    x000D      setTimeout function     x000D        this scrollAnimate    x000D        window scrollBy 0   -Math abs this scrollTop      this options normal  steps      x000D        bind this    this options normal  ms      x000D      x000D    x000D  Scroller prototype scrollAnimateLinear   function     x000D    if  this scrollTop    gt  0  amp  amp  this stop    false    x000D      setTimeout function     x000D        this scrollAnimateLinear    x000D        window scrollBy 0  -Math abs this options linear  px      x000D        bind this   this options linear  ms     x000D      x000D    x000D   x000D  Scroller prototype click   function     x000D   x000D    this button addEventListener  click   function e    x000D      e stopPropagation    x000D      this scroll    x000D      bind this   false   x000D   x000D    this button addEventListener  dblclick   function e    x000D      e stopPropagation    x000D      this scrollNoAnimate    x000D      bind this   false   x000D   x000D    x000D   x000D  Scroller prototype hide   function     x000D    this button classList add  scroll-button--hidden    x000D    x000D   x000D  Scroller prototype show   function     x000D    this button classList remove  scroll-button--hidden    x000D    x000D   x000D  Scroller prototype checkPosition   function     x000D    window addEventListener  scroll   function e    x000D      if  this scrollTop    gt  this options showButtonAfter    x000D        this show    x000D        else   x000D        this hide    x000D        x000D      bind this   false   x000D    x000D   x000D  Scroller prototype stopListener   function     x000D   x000D       stop animation on slider drag x000D    var position   this scrollTop    x000D    window addEventListener  scroll   function e    x000D      if  this scrollTop    gt  position    x000D        this stopTimeout 200   x000D        else   x000D              x000D        x000D      position   this scrollTop    x000D      bind this  position   false   x000D   x000D       stop animation on wheel scroll down x000D    window addEventListener  wheel   function e    x000D      if  e deltaY  gt  0  this stopTimeout 200   x000D      bind this   false   x000D    x000D   x000D  Scroller prototype stopTimeout   function ms    x000D    this stop   true  x000D       console log this stop      x000D    setTimeout function     x000D      this stop   false  x000D      console log this stop      x000D      bind this   ms   x000D    x000D   x000D  Scroller prototype scrollTop   function     x000D    var curentScrollTop   document documentElement scrollTop    document body scrollTop  x000D    return curentScrollTop  x000D    x000D   x000D   x000D   x000D     ------------------- USE EXAMPLE --------------------- x000D      Set options x000D  var options     x000D     showButtonAfter   200     show button after scroling down this amount of px x000D     animate    normal       false normal linear  - for false no aditional settings are needed x000D   x000D     normal        applys only if  animate  normal  - set scroll loop distanceLeft steps ms x000D       steps   20     the more steps per loop the slower animation gets x000D       ms   10    the less ms the quicker your animation gets x000D       x000D     linear        applys only if  animate  linear  - set scroll px ms x000D       px   30     the more px the quicker your animation gets x000D       ms   10    the less ms the quicker your animation gets x000D       x000D     x000D      Create new Scroller and run it  x000D  var scroll   new Scroller options   x000D  scroll init    x000D     CSS    x000D   x000D   import url https   fonts googleapis com css family Open Sans   x000D   body   x000D    font-family   Open Sans   sans-serif  x000D    font-size  1 2rem  x000D    line-height  2rem  x000D    height  100   x000D    position  relative  x000D    padding  0 25   x000D    x000D   scroll-button   x000D    font-size  1 2rem  x000D    line-height  2rem  x000D    padding  10px  x000D    width  50px  x000D    height  50px  x000D    background  black  x000D    color  white  x000D    border-radius  50   x000D    position  fixed  x000D    right  20px  x000D    bottom  20px  x000D    visibility  visible  x000D    filter  alpha opacity 50   x000D    filter  progid  DXImageTransform Microsoft Alpha Opacity 50   x000D    opacity  0 5  x000D    cursor  pointer  x000D    transition  all 1 2s  x000D    -webkit-transition  all 1 2s  x000D    -moz-transition  all 1 2s  x000D    -ms-transition  all 1 2s  x000D    -o-transition  all 1 2s  x000D    x000D   scroll-button hover   x000D    filter  alpha opacity 100   x000D    filter  progid  DXImageTransform Microsoft Alpha Opacity 100   x000D    opacity  1  x000D    x000D   scroll-button--hidden   x000D    filter  alpha opacity 0   x000D    filter  progid  DXImageTransform Microsoft Alpha Opacity 0   x000D    opacity  0  x000D    visibility  hidden  x000D    x000D   lt  -- HTML -- gt  x000D   x000D   lt h1 gt Scroll down by 200px for button to appear lt  h1 gt  x000D   lt ul gt  x000D     lt li gt Cross-browser lt  li gt  x000D     lt li gt Copy Paste solution lt  li gt  x000D     lt li gt 3 animate modes   lt b gt   normal   linear  false  lt  b gt  lt  li gt  x000D     lt li gt Customize your aniamtion with aveilable settings - make it snapy or fluent lt  li gt  x000D     lt li gt Double click to skip animation lt  li gt  x000D     lt li gt Every next single click adds initial speed lt  li gt  x000D     lt li gt Stop scroll animation by draging down the scroll bar lt  li gt  x000D     lt li gt Stop scroll animation by mouse wheel down lt  li gt  x000D     lt li gt Animated button fade-in-out on scroll lt  li gt  x000D   lt  ul gt  x000D   x000D   lt br   gt  x000D   lt br   gt  x000D   lt pre gt  x000D     ------------------- USE EXAMPLE --------------------- x000D      Set options x000D  var options     x000D     showButtonAfter   200     show button after scroling down this amount of px x000D     animate    normal       false normal linear  - for false no aditional settings are needed x000D     x000D     normal        applys only if  animate  normal  - set scroll loop distanceLeft steps ms x000D       steps   20     the more steps the slower animation gets x000D       ms   20    the less ms the quicker your animation gets x000D        x000D     linear        applys only if  animate  linear  - set scroll px ms x000D       px   55     the more px the quicker your animation gets x000D       ms   10    the less ms the quicker your animation gets x000D        x000D     x000D   x000D      Create new Scroller and run it  x000D  var scroll   new Scroller options   x000D  scroll init    x000D   lt  pre gt  x000D   lt br   gt  x000D   lt br   gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Quae molestiae illo nobis quo autem molestias voluptatum quam  amet ipsum debitis  iure animi illum soluta eaque qui perspiciatis harum  sequi nesciunt  lt  span gt  lt span gt Quisquam nesciunt aspernatur a possimus pariatur enim architecto  Hic aperiam sit repellat doloremque vel est soluta et assumenda dolore  sint sapiente porro  quam impedit  Sint praesentium quas excepturi  voluptatem dicta  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Voluptate  porro nisi molestias minima corrupti tempore  dolorum fugiat ipsam dicta doloremque accusamus atque consequatur iusto natus  mollitia distinctio odit dolor tempora  lt  span gt  lt span gt Perferendis a in laudantium accusantium  dolorum eius placeat velit porro similique  eum cumque veniam neque aspernatur architecto suscipit rem laboriosam voluptates laborum  Voluptates tempora necessitatibus animi nostrum quod  maxime odio  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Nihil accusantium  itaque corporis repellat pariatur soluta officia perspiciatis in reprehenderit facere  incidunt saepe excepturi  Inventore atque ex illo  ipsam at deserunt  lt  span gt  lt span gt Laborum inventore officia  perspiciatis cumque magni consequatur iste accusantium soluta  nesciunt blanditiis voluptatibus adipisci laudantium mollitia minus quia necessitatibus voluptates  Minima unde quos impedit necessitatibus aspernatur minus maiores ipsa eligendi  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Voluptate nesciunt  explicabo similique  quo maxime modi  aliquid  voluptatibus repellendus dolorum placeat mollitia ea dicta quia laboriosam alias dignissimos ipsam tenetur  Nulla  lt  span gt  lt span gt Vel maiores necessitatibus odio voluptate debitis  error in accusamus nulla  eum  nemo et ea commodi  Autem numquam at  consequatur temporibus  Mollitia placeat nobis blanditiis impedit distinctio  Ad  incidunt fugiat sed  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Ipsam voluptatum  odio quam omnis iste laudantium  itaque architecto  eos ullam debitis delectus sapiente nemo autem reprehenderit  Dolorem quidem facere ipsam  Nisi  lt  span gt  lt span gt Vitae quaerat modi voluptatibus ratione numquam  Sapiente aliquid officia pariatur quibusdam aliquam id expedita non recusandae  cumque deserunt asperiores  Corrupti et doloribus aspernatur ipsum asperiores  ipsa unde corporis commodi reiciendis  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Minima adipisci minus iste  nesciunt itaque quisquam quidem voluptatum assumenda rerum aliquid  excepturi voluptatem tempora  Possimus ratione alias a error vel  rem  lt  span gt  lt span gt Officia esse error accusantium veritatis ad  et sit animi  Recusandae mollitia odit tenetur ad cumque maiores eligendi blanditiis nobis hic tempora obcaecati consequatur commodi totam  debitis  veniam  ducimus molestias ut  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Obcaecati quibusdam  tempora cupiditate quaerat tempore ullam delectus voluptates optio eum placeat provident consequatur iure reprehenderit vero quae sapiente architecto earum nemo  lt  span gt  lt span gt Quis molestias sint fuga doloribus  necessitatibus nulla  Esse ipsa  itaque asperiores  Tempora a sequi nobis cumque incidunt aspernatur  pariatur rem voluptatibus  Atque veniam magnam  ea laudantium ipsum reprehenderit sapiente repellendus  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Minima  pariatur at explicabo aliquid repudiandae vero eum quasi totam voluptates iusto unde ad repellendus ipsam et voluptatem hic adipisci  Vero  nobis  lt  span gt  lt span gt Consequatur eligendi quo quas omnis architecto dolorum aperiam doloremque labore  explicabo enim incidunt vitae saepe  quod soluta illo odit provident amet beatae quasi animi  Similique nostrum molestiae animi corrupti qui  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Molestias quis  tempora laborum incidunt qui fuga adipisci doloremque iusto commodi vitae est  nemo iure placeat ut sit optio  consequuntur voluptas impedit  lt  span gt  lt span gt Eos officiis  hic esse unde eaque  aut tenetur voluptate quam sint vel exercitationem totam dolor odio soluta illo praesentium non corrupti  Consequuntur velit  mollitia excepturi  Minus  veniam accusantium  Aliquam  ea  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Reprehenderit quis reiciendis veritatis expedita velit vitae amet magni sunt rerum in blanditiis aut tempore quia fugiat  voluptates officia quaerat quam id  lt  span gt  lt span gt Sapiente tempore repudiandae  quae doloremque ullam odio quia ea  Impedit atque  ipsa consequatur quis obcaecati voluptas necessitatibus  cupiditate sunt amet ab modi illum inventore  a dolor enim similique architecto est  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Itaque non aliquam  sit illo quas deserunt esse nobis reprehenderit quidem fuga beatae eligendi reiciendis omnis qui repellat velit earum blanditiis possimus  lt  span gt  lt span gt Provident aspernatur ducimus  illum beatae debitis vitae non dolorum rem officia nostrum natus accusantium perspiciatis ad soluta maiores praesentium eveniet qui hic quis at quaerat ea perferendis  Ut  aut  natus  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Ratione corrupti quibusdam  sed hic veniam  Perspiciatis ex  quod architecto natus autem totam at commodi excepturi maxime pariatur corporis  veritatis vero  praesentium  lt  span gt  lt span gt Nesciunt suscipit  nobis eos perferendis ex quaerat inventore nihil qui magnam saepe rerum velit reiciendis ipsam deleniti ducimus eligendi odio eius minima vero  nisi voluptates amet eaque  iste  labore laudantium  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Illo  voluptas accusantium ad omnis velit distinctio  Adipisci magnam nihil nostrum molestiae rem dolores  ut ad nemo  dolor quos itaque maiores quaerat  lt  span gt  lt span gt Quia ad suscipit reprehenderit vitae inventore eius non culpa maiores omnis sit obcaecati vel placeat quibusdam  ipsa exercitationem nam odit  magni nobis  Quam quas  accusamus expedita molestiae asperiores eaque ex  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Rerum explicabo doloribus nihil iusto quasi vel expedita dignissimos amet mollitia  temporibus aut atque architecto assumenda dolorum nam velit deserunt totam numquam  lt  span gt  lt span gt Ab perferendis labore  quae  Quidem architecto quo officia deserunt ea doloribus libero molestias id nisi perferendis eum porro  quibusdam  Odit aliquid placeat rem aut officia minus sit esse eos obcaecati  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Eligendi nostrum repellendus placeat  unde aperiam  Fuga  voluptas  minima  Debitis nemo ducimus itaque laboriosam error quaerat reprehenderit quo animi incidunt  Nulla  quis  lt  span gt  lt span gt Explicabo assumenda dicta ratione  Tempora commodi asperiores  explicabo doloremque eius quia impedit possimus architecto sit nemo odio eum fuga minima dolor iste mollitia sequi dolorem perspiciatis unde quisquam laborum soluta  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Veniam officia corporis  reiciendis laudantium  voluptate voluptates necessitatibus assumenda  delectus quisquam velit deserunt  Reprehenderit  vel quaerat accusantium nesciunt libero animi  Sequi  eveniet  lt  span gt  lt span gt Animi natus pariatur porro  alias  veniam aut est tempora adipisci molestias harum modi cumque assumenda enim  Expedita eveniet autem illum rerum nostrum ipsum alias neque aut  dolorum impedit pariatur non  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Quis aliquid rerum  odio veniam ipsam ad officia quos repellat ex aperiam voluptatum optio est animi possimus minus  Sapiente voluptates amet dolorem  lt  span gt  lt span gt Illo necessitatibus similique asperiores inventore ut cumque nihil assumenda debitis explicabo rerum  dolorum molestiae culpa accusantium  Nisi doloremque optio provident blanditiis  eum ipsam asperiores  consequatur aliquam vel sit mollitia sunt  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Enim  totam harum perferendis  Minus ea perferendis laboriosam  iste  qui corrupti  quas veritatis omnis officiis animi fuga perspiciatis impedit  Error  harum  voluptas  lt  span gt  lt span gt Omnis laborum  cum mollitia facilis ipsa unde distinctio maxime nesciunt illum perspiciatis ut officiis  eligendi numquam dolorem quod modi ipsam est rerum perferendis repellendus totam  Maxime excepturi culpa alias labore  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Impedit deleniti  odit sit consequatur dolorum omnis repellendus  alias vel ullam numquam  Nostrum obcaecati hic  possimus delectus nam atque aliquid explicabo cum  lt  span gt  lt span gt Explicabo tenetur minima consequatur  aliquam  laudantium non consequuntur facilis sint  suscipit debitis ex atque mollitia magni quod repellat ratione dolorum excepturi molestiae cumque iusto eos unde  Voluptatum dolores  porro provident  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  At laboriosam fuga aperiam eveniet  obcaecati esse  nulla porro iure molestiae praesentium sint fugiat ea voluptate suscipit voluptates mollitia  voluptatibus  Autem  non  lt  span gt  lt span gt Numquam velit culpa tempora ratione ipsum minus modi in  Nisi reiciendis  voluptate voluptatem maxime repellat quae odio  repellendus aliquid laborum dolorem  Labore  fuga ea minima explicabo quae voluptatum necessitatibus  similique  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Quasi  rerum dolorum nemo error fugiat ut  modi  architecto libero maxime laborum repellendus doloribus neque aperiam adipisci quaerat obcaecati deserunt consequuntur amet  lt  span gt  lt span gt Sint  assumenda nisi obcaecati doloremque iste  Perspiciatis accusantium  distinctio impedit cum esse recusandae sunt  Officiis culpa dolore eius  doloribus natus  dolorum excepturi vitae fugiat ullam provident harum  Suscipit  assumenda  harum  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Odit  nihil tenetur tempore eligendi qui nesciunt consequatur delectus accusantium consectetur ipsa  nulla doloribus dolores rerum corporis  laborum  laboriosam hic mollitia repellat  lt  span gt  lt span gt Ab deleniti vitae blanditiis quod tenetur  Voluptatem temporibus ab eaque quis  Quis odio aliquid harum temporibus totam  ipsa eius iusto fugiat enim in  quibusdam molestiae aliquam consequatur nulla  consequuntur sint  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Illum odit praesentium quos  earum nesciunt laudantium illo tempora eligendi  porro doloremque mollitia neque aperiam inventore nam maxime dolor labore aspernatur molestias  lt  span gt  lt span gt Voluptatibus provident hic cupiditate placeat  ut reprehenderit nisi eum  dolores ad sed quis  Doloribus molestiae  quae rem odit expedita soluta  facilis animi corporis velit ut in  recusandae harum laboriosam veritatis  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Incidunt repudiandae molestias magnam delectus veritatis labore  corporis dicta officia quos  ad corrupti odit  Ad hic officia maxime eveniet consectetur similique adipisci  lt  span gt  lt span gt Quia at  nesciunt aliquid delectus ex alias voluptas maxime hic esse  Incidunt  laborum quos mollitia dolores et  Voluptas commodi asperiores  fugit quidem quis corporis  a eaque  animi  autem deserunt repellendus  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Sequi quas  voluptas hic minima inventore optio  id quidem placeat necessitatibus omnis voluptatibus vitae mollitia tempora consequuntur consequatur  illo facilis accusamus illum  lt  span gt  lt span gt Voluptates consequuntur ipsam odit  Eius quis ipsam vitae  nihil molestias perferendis corporis recusandae consequatur vero iure blanditiis quas adipisci quos voluptatem rem illo voluptate  Eveniet officiis iure sit laborum veniam  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Suscipit a quis cumque nostrum quisquam molestiae pariatur  asperiores natus necessitatibus adipisci illum cupiditate nam vero  tempora excepturi laborum  earum  Voluptates  nobis  lt  span gt  lt span gt Pariatur suscipit  hic blanditiis libero  iusto  quam cupiditate nam error id asperiores repellat ab consequatur vitae ipsa voluptatem totam magni reiciendis expedita maxime dolor  Minus explicabo quas  laborum ab omnis  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Labore qui ad assumenda placeat optio illo molestias corporis dolorum cum  Doloribus eius autem obcaecati minima  asperiores iure dignissimos ducimus suscipit dolorem  lt  span gt  lt span gt Blanditiis earum accusamus eaque temporibus necessitatibus voluptatum dolorem enim debitis inventore assumenda quae error perspiciatis aut  nulla delectus quam ipsa sapiente ea aliquam laboriosam repudiandae  Nesciunt praesentium  beatae eos quasi  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Cupiditate dicta voluptate impedit  Ad voluptatum dicta earum perferendis asperiores  Dolore distinctio modi expedita consequatur provident perspiciatis neque totam rerum placeat quas  lt  span gt  lt span gt Eveniet optio est possimus iste accusantium ipsum illum  Maiores saepe repudiandae facere  delectus iure dolorem vitae nihil pariatur minima  reprehenderit eligendi dolore impedit  nisi doloribus quidem similique  Optio  delectus  minus  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Iste ex molestiae architecto enim nihil tempore  atque consequuntur doloribus recusandae sed consequatur veniam quos  in consectetur perspiciatis magni nostrum ab voluptates  lt  span gt  lt span gt Nisi quos mollitia quis in maiores asperiores labore deserunt  Voluptate voluptas adipisci qui hic officia molestias  laborum necessitatibus sint nam vel minus incidunt perspiciatis recusandae sunt  rerum suscipit doloremque possimus  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  At nihil perferendis quae quidem facilis aliquid pariatur possimus hic asperiores  recusandae exercitationem adipisci atque laborum  delectus  odit ab reprehenderit distinctio dolor  lt  span gt  lt span gt Non excepturi quos aspernatur repudiandae laboriosam  unde molestias  totam  sapiente harum accusamus delectus laborum ipsam velit amet nisi  Consectetur aliquam provident voluptatibus saepe repudiandae eveniet laborum beatae  animi  voluptate dolores  lt  span gt  lt  p gt  x000D   lt p gt  lt span gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Cumque magni  eum ipsa  veritatis facere voluptatem dolorum nobis neque minus debitis asperiores iste  Pariatur sequi quam  tempora  Dignissimos  esse similique tempora  lt  span gt  lt span gt Ex delectus excepturi autem sunt  nemo repudiandae  recusandae nostrum accusantium nobis temporibus magnam eligendi similique veritatis deleniti  eaque blanditiis possimus at  Repellat alias laboriosam ipsum commodi dolorem  corporis dolore suscipit  lt  span gt  lt  p gt  x000D   x000D   x000D

User · Answer

Yet another approach is using window scrollBy  JSFiddle   x000D   x000D  function scroll pxPerFrame  duration    x000D          if   pxPerFrame     duration  return  x000D          const end   new Date   getTime     duration  x000D          step     x000D   x000D          function step     x000D            window scrollBy 0  pxPerFrame   x000D            if  new Date   getTime    lt  end    x000D              window setTimeout step  1000   60   x000D              else   x000D              console log  done scrolling     x000D              x000D            x000D          x000D  body   x000D    width  200px  x000D    x000D   lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  p gt  x000D   lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  p gt  x000D   lt p gt  x000D   lt button onclick  scroll -5  3000   gt  x000D  scroll -5  3000  x000D   lt  button gt  x000D   lt  p gt  x000D   x000D   x000D

User · Answer

This is a cross browser approach based on answers above  function scrollTo to  duration        if  duration  lt  0  return      var scrollTop   document body scrollTop   document documentElement scrollTop      var difference   to - scrollTop      var perTick   difference   duration   10       setTimeout function           scrollTop   scrollTop   perTick        document body scrollTop   scrollTop        document documentElement scrollTop   scrollTop        if  scrollTop     to  return        scrollTo to  duration - 10          10

User · Answer

Without JQuery code  Hope this will help you   function TopscrollTo     if window scrollY  0        setTimeout function            window scrollTo 0 window scrollY-30           TopscrollTo           100            call this TopscrollTo   function on button click event or on any other element event which you want

User · Answer

Building on some of the answers here  but using some simple math for a smooth transition using a sine curve   scrollTo element  from  to  duration  currentTime           if  from  lt   0    from   0          if  to  lt   0    to   0          if  currentTime gt  duration  return         let delta   to-from         let progress   currentTime   duration   Math PI   2         let position   delta    Math sin progress           setTimeout      gt               element scrollTop   from   position             this scrollTo element  from  to  duration  currentTime   10             10          Usage      Smoothly scroll from current position to new position in 1 2 second  scrollTo element  element scrollTop  element scrollTop   400  500  0     PS  take note of ES6 style

User · Answer

I modified the code of  TimWolla to add more options and a some movement functions  Also  added support to crossbrowser with document body scrollTop and document documentElement scrollTop     scroll to top scrollTo 0  1000       Element to move  time in ms to animate function scrollTo element  duration        var e   document documentElement      if e scrollTop   0           var t   e scrollTop            e scrollTop          e   t 1   e scrollTop-- e document body            scrollToC e  e scrollTop  element  duration         Element to move  element or px from  element or px to  time in ms to animate function scrollToC element  from  to  duration        if  duration  lt   0  return      if typeof from      object  from from offsetTop      if typeof to      object  to to offsetTop       scrollToX element  from  to  0  1 duration  20  easeOutCuaic      function scrollToX element  xFrom  xTo  t01  speed  step  motion        if  t01  lt  0    t01  gt  1    speed lt   0            element scrollTop   xTo          return            element scrollTop   xFrom -  xFrom - xTo    motion t01       t01    speed   step       setTimeout function             scrollToX element  xFrom  xTo  t01  speed  step  motion          step     function easeOutCuaic t       t--      return t t t 1      http   jsfiddle net forestrf tPQSv   Minified version  http   jsfiddle net forestrf tPQSv 139      c   element to scroll to or top position in pixels    e   duration of the scroll in ms  time scrolling    d    optative  ease function  Default easeOutCuaic function scrollTo c e d  d   d easeOutCuaic  var a document documentElement if 0   a scrollTop  var b a scrollTop   a scrollTop a b 1   a scrollTop-- a document body b a scrollTop 0 gt  e    object    typeof b amp  amp  b b offsetTop   object    typeof c amp  amp  c c offsetTop  function a b c f d e h  function g   0 gt f  1 lt f  0 gt  d a scrollTop c  a scrollTop b- b-c  h f  f  d e setTimeout g e   g    a b c 0 1 e 20 d     function easeOutCuaic t       t--      return t t t 1

User · Answer

I have choose  akai version of  timwolla answer and added stopAnimation function in return  so before starting new animation  the old one can be stopped   if   this stopAnimation       this stopAnimation        this stopAnimation   scrollTo  el  scrollDestination  300        definitions  function scrollTo element  to  duration        var start   element scrollTop          change   to - start          increment   20          timeOut       var animateScroll   function elapsedTime                    elapsedTime    increment          var position   easeInOut elapsedTime  start  change  duration                                   element scrollTop   position           if  elapsedTime  lt  duration                timeOut   setTimeout function                     animateScroll elapsedTime                  increment                         animateScroll 0        return stopAnimation      function stopAnimation             clearTimeout  timeOut            function easeInOut currentTime  start  change  duration        currentTime    duration   2      if  currentTime  lt  1            return change   2   currentTime   currentTime   start            currentTime -  1      return -change   2    currentTime    currentTime - 2  - 1    start

User · Answer

Just made this javascript only solution below.

Simple usage:

EPPZScrollTo.scrollVerticalToElementById('wrapper', 0);

Engine object (you can fiddle with filter, fps values):

/**
 *
 * Created by Borbás Geri on 12/17/13
 * Copyright (c) 2013 eppz! development, LLC.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 */


var EPPZScrollTo =
{
    /**
     * Helpers.
     */
    documentVerticalScrollPosition: function()
    {
        if (self.pageYOffset) return self.pageYOffset; // Firefox, Chrome, Opera, Safari.
        if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop; // Internet Explorer 6 (standards mode).
        if (document.body.scrollTop) return document.body.scrollTop; // Internet Explorer 6, 7 and 8.
        return 0; // None of the above.
    },

    viewportHeight: function()
    { return (document.compatMode === "CSS1Compat") ? document.documentElement.clientHeight : document.body.clientHeight; },

    documentHeight: function()
    { return (document.height !== undefined) ? document.height : document.body.offsetHeight; },

    documentMaximumScrollPosition: function()
    { return this.documentHeight() - this.viewportHeight(); },

    elementVerticalClientPositionById: function(id)
    {
        var element = document.getElementById(id);
        var rectangle = element.getBoundingClientRect();
        return rectangle.top;
    },

    /**
     * Animation tick.
     */
    scrollVerticalTickToPosition: function(currentPosition, targetPosition)
    {
        var filter = 0.2;
        var fps = 60;
        var difference = parseFloat(targetPosition) - parseFloat(currentPosition);

        // Snap, then stop if arrived.
        var arrived = (Math.abs(difference) <= 0.5);
        if (arrived)
        {
            // Apply target.
            scrollTo(0.0, targetPosition);
            return;
        }

        // Filtered position.
        currentPosition = (parseFloat(currentPosition) * (1.0 - filter)) + (parseFloat(targetPosition) * filter);

        // Apply target.
        scrollTo(0.0, Math.round(currentPosition));

        // Schedule next tick.
        setTimeout("EPPZScrollTo.scrollVerticalTickToPosition("+currentPosition+", "+targetPosition+")", (1000 / fps));
    },

    /**
     * For public use.
     *
     * @param id The id of the element to scroll to.
     * @param padding Top padding to apply above element.
     */
    scrollVerticalToElementById: function(id, padding)
    {
        var element = document.getElementById(id);
        if (element == null)
        {
            console.warn('Cannot find element with id \''+id+'\'.');
            return;
        }

        var targetPosition = this.documentVerticalScrollPosition() + this.elementVerticalClientPositionById(id) - padding;
        var currentPosition = this.documentVerticalScrollPosition();

        // Clamp.
        var maximumScrollPosition = this.documentMaximumScrollPosition();
        if (targetPosition > maximumScrollPosition) targetPosition = maximumScrollPosition;

        // Start animation.
        this.scrollVerticalTickToPosition(currentPosition, targetPosition);
    }
};

User · Answer

Another cross-browser approach based on above solution

function doScrollTo(to, duration) {
    var element = document.documentElement;

        var start = element.scrollTop,
        change = to - start,
        increment = 20,
        i = 0;

    var animateScroll = function(elapsedTime) {
        elapsedTime += increment;
        var position = easeInOut(elapsedTime, start, change, duration);
        if (i === 1 && window.scrollY === start) {
            element = document.body;
            start = element.scrollTop;
        }
        element.scrollTop = position;
        if (!i) i++;
        if (elapsedTime < duration) {
            setTimeout(function() {
                animateScroll(elapsedTime);
            }, increment);
        }
    };

    animateScroll(0);
}

The trick is to control the actual scroll change, and if it is zero, change the scroll element.

User · Answer

I see that most all of the above posts search for a button with javascript  This works  as long as you have only one button  I would recommend defining an  onclick  element inside the button  That  onclick  would then call the function causing it to scroll   If you do it like that  you can use more than one button  as long as the button looks something like this    lt button onclick  scrollTo document body  0  1250   gt To the top lt  button gt

User · Answer

looks like there s a lot of solutions already  anyway  here s another one  uses easing equations       first add raf shim    http   www paulirish com 2011 requestanimationframe-for-smart-animating  window requestAnimFrame    function      return  window requestAnimationFrame                    window webkitRequestAnimationFrame              window mozRequestAnimationFrame                 function  callback                window setTimeout callback  1000   60                          main function function scrollToY scrollTargetY  speed  easing           scrollTargetY  the target scrollY property of the window        speed  time in pixels per second        easing  easing equation to use      var scrollY   window scrollY    document documentElement scrollTop          scrollTargetY   scrollTargetY    0          speed   speed    2000          easing   easing     easeOutSine           currentTime   0          min time  1  max time  8 seconds     var time   Math max  1  Math min Math abs scrollY - scrollTargetY    speed   8            easing equations from https   github com danro easing-js blob master easing js     var easingEquations                 easeOutSine  function  pos                    return Math sin pos    Math PI   2                               easeInOutSine  function  pos                    return  -0 5    Math cos Math PI   pos  - 1                               easeInOutQuint  function  pos                    if   pos    0 5   lt  1                        return 0 5   Math pow pos  5                                     return 0 5    Math pow  pos - 2   5    2                                    add animation loop     function tick             currentTime    1   60           var p   currentTime   time          var t   easingEquations easing  p            if  p  lt  1                requestAnimFrame tick                window scrollTo 0  scrollY     scrollTargetY - scrollY    t              else               console log  scroll done                window scrollTo 0  scrollTargetY                           call it once to get started     tick          scroll it  scrollToY 0  1500   easeInOutQuint

User · Answer

No one mentioned the CSS property  scroll-behavior  CSS  html     scroll-behavior  smooth      JS  window scrollTo 0 0

User · Answer

window scroll  top  0  left  0  behavior   smooth        Got it from an article about Smooth Scrolling   If needed  there are some polyfills available

User · Answer

Easy   var scrollIt   function time           time   scroll time in ms     var start   new Date   getTime            scroll   document documentElement scrollTop   document body scrollTop          timer   setInterval function                 var now   Math min time  new Date   getTime   -start  time              document documentElement scrollTop                   document body scrollTop    1-time  start scroll              if  now    1  clearTimeout timer             25

User · Answer

Use this solution  animate document documentElement   scrollTop   0  200     Thanks

[javascript] Cross browser JavaScript (not jQuery...) scroll to top animation

The answer is

Examples related to javascript

Tags