Scroll to the top of the page using JavaScript

Question

How do I scroll to the top of the page using JavaScript  The scrollbar instantly jumping to the top of the page is desirable too as I m not looking to achieve smooth scrolling

User · Answer

Active all Browser  Good luck  var process          var delay   50    milisecond scroll top         var scrollPixel   20    pixel U want to change after milisecond           Fix Undefine pageofset when using IE 8 below          function getPapeYOfSet                 var yOfSet    typeof  window pageYOffset       number     window pageYOffset   document documentElement scrollTop              return yOfSet                       function backToTop                 process   setInterval function                      var yOfSet   getPapeYOfSet                    if  yOfSet     0                        clearInterval process                     else                       window scrollBy 0  -scrollPixel                                    delay

User · Answer

Non-jQuery solution   pure JavaScript   document body scrollTop   document documentElement scrollTop   0

User · Answer

The old  top can do the trick   document location href     top     Works fine in FF  IE and Chrome

User · Answer

document  scrollTop 0   also works

User · Answer

Try this to scroll on top   lt script gt     document  ready function          window  scrollTop 0        lt  script gt

User · Answer

Try this   lt script gt      function          a   click function        var href    this  attr  href          body  html   animate        scrollTop    href  offset   top         1000               lt  script gt

User · Answer

Funnily enough  most of these did not work for me AT ALL  so I used jQuery-ScrollTo js with this   wrapper find   jumpToTop   click function             wrapper   ScrollTo           duration  0          offsetTop  -1     container   offset   top               And it worked    document  scrollTop   was returning 0  and this one actually worked instead

User · Answer

This will work   window scrollTo 0  0

User · Answer

A simple example of scroll to  using html is much more efficient but here is how to do it with JavaScript    x000D   x000D  const btn   document querySelector   btn    btn addEventListener  click      gt         window scrollTo          left  0         top  0       window addEventListener  scroll   function         const scrollHeight   window pageYOffset      if  scrollHeight  gt  500            btn classList add  show-link          else           btn classList remove  show-link              x000D   section       padding-bottom  5rem      height  90vh     btn       position  fixed      bottom  3rem      right  3rem      background  blue      width  2rem      height  2rem      color   fff      visibility  hidden      z-index  -100     show-link       visibility  visible      z-index  100      title h2       text-align  center     x000D       lt section class  section  gt         lt div class  title  gt           lt h2 gt Section One lt  h2 gt         lt  div gt       lt  section gt       lt section class  section  gt         lt div class  title  gt           lt h2 gt Section Two lt  h2 gt         lt  div gt       lt  section gt       lt section  class  section  gt         lt div class  title  gt           lt h2 gt Section Three lt  h2 gt         lt  div gt       lt  section gt       lt a class  btn  gt       lt  a gt  x000D   x000D   x000D

User · Answer

None of the answers above will work in SharePoint 2016   It has to be done like this   https   sharepoint stackexchange com questions 195870   var w   document getElementById  s4-workspace    w scrollTop   0

User · Answer

smooth scroll  pure javascript    function smoothscroll        var currentScroll   document documentElement scrollTop    document body scrollTop      if  currentScroll  gt  0             window requestAnimationFrame smoothscroll            window scrollTo  0 currentScroll -  currentScroll 5

User · Answer

You can try using JS as in this Fiddle http   jsfiddle net 5bNmH 1   Add the  Go to top  button in your page footer    lt footer gt       lt hr   gt       lt p gt Just some basic footer text  lt  p gt       lt  -- Go to top Button -- gt       lt a href     class  go-top  gt Go Top lt  a gt   lt  footer gt

User · Answer

A lot of users recommend selecting both the html and body tags for cross-browser compatibility  like so      html  body   animate   scrollTop  0    callback     This can trip you up though if you re counting on your callback running only once  It will in fact run twice because you ve selected two elements   If that is a problem for you  you can do something like this   function scrollToTop callback        if     html   scrollTop                 html   animate   scrollTop  0    callback           return                body   animate   scrollTop  0    callback       The reason this works is in Chrome    html   scrollTop   returns 0  but not in other browsers such as Firefox   If you don t want to wait for the animation to complete in the case that the scrollbar is already at the top  try this   function scrollToTop callback        if     html   scrollTop                 html   animate   scrollTop  0    callback           return             if     body   scrollTop                 body   animate   scrollTop  0    callback           return             callback

User · Answer

Why don t you use JQuery inbuilt function scrollTop       html  body   scrollTop 0    For scrolling to top     body   scrollTop    body   0  scrollHeight    For scrolling to bottom   Short and simple

User · Answer

With window scrollTo 0  0   is very fast so i tried the Mark Ursino example  but in Chrome nothing happens and i found this      showPeriodMsgPopup   click function          window scrollTo 0  0          html   animate  scrollTop 0    slow     IE  FF        body   animate  scrollTop 0    slow     chrome  don t know if Safari works         popupPeriod   fadeIn 1000  function            setTimeout function       popupPeriod   fadeOut 2000     3000                 tested all 3 browsers and it works i m using blueprint css this is when a client clicks  Book now  button and doesn t have the rental period selected  slowly moves to the top where the calendars are and opens a dialog div pointing to the 2  fields  after 3sec it fades

User · Answer

Try this code      html  body   animate       scrollTop     div   offset   top    time     div    Dom Element where you want to move scroll   time    milliseconds  define the speed of the scroll

User · Answer

You can use javascript s built in function scrollTo   x000D   x000D  function scroll       window scrollTo       top  0      behavior   smooth          x000D   lt button onclick  scroll  gt Scroll lt  button gt  x000D   x000D   x000D

User · Answer

Shortest  location       This solution is improvement of pollirrata answer and have some drawback  no smooth scroll and change page location  but is shortest

User · Answer

lt script gt    function       var scroll pos  0                   html  body   animate  scrollTop  scroll pos     2000         lt  script gt    Edit      html  body   animate  scrollTop  scroll pos    2000     Another way scroll with top and left margin   window scrollTo   top  100  left  100  behavior   smooth

User · Answer

If you do want smooth scrolling  try something like this      a href   top     click function          html  body   animate   scrollTop  0     slow      return false        That will take any  lt a gt  tag whose href   top  and make it smooth scroll to the top

User · Answer

document getElementById  quot id of what you want to scroll to quot   scrollIntoView    Edit  It s been a year and I m still randomly getting reputation from this post lmao Edit 2  Please stop editing the first edit out  At least ask me before editing my post

User · Answer

Try this   lt script gt        window  scrollTop 100    lt  script gt

User · Answer

The equivalent solution in TypeScript may be as the following    window scroll         top  0        left  0        behavior   smooth

User · Answer

Smooth scrolling With Pure Javascript  Without jQuery  x000D   x000D     Get The Id var topPage   document getElementById  top-page       On Click  Scroll to the Top of Page topPage onclick        gt  window scrollTo   top  0  behavior   smooth         On scroll  Show Hide the button window onscroll        gt      window scrollY  gt  500        topPage style display    block          topPage style display    none     x000D  body       background-color   111      height 5000px       top-page       all unset      position  fixed      right  20px      bottom  20px      cursor  pointer      font-size  2rem      outline  none      display  none    x000D   lt button id  top-page  gt  lt  button gt  x000D   x000D   x000D

User · Answer

Motivation  This simple solution works natively and implements a smooth scroll to any position   It avoids using anchor links  those with    that  in my opinion  are useful if you want to link to a section  but are not so comfortable in some situations  specially when pointing to top which could lead to two different URLs pointing to the same location  http   www example org and http   www example org      Solution  Put an id to the tag you want to scroll to  for example your first section  which answers this question  but the id could be placed everywhere in the page    lt body gt     lt section id  top  gt       lt  -- your content -- gt     lt  section gt     lt div id  another  gt  lt  -- more content -- gt  lt  div gt    Then as a button you can use a link  just edit the onclick attribute with a code like this    lt a onclick  document getElementById  top   scrollIntoView   behavior   smooth   block   start   inline   nearest      gt Click me lt  a gt    Where the argument of document getElementById is the id of the tag you want to scroll to after click

User · Answer

function scrolltop          var offset   220      var duration   500       jQuery window  scroll function             if  jQuery this  scrollTop    gt  offset                jQuery   back-to-top   fadeIn duration             else               jQuery   back-to-top   fadeOut duration                          jQuery   back-to-top   click function event            event preventDefault            jQuery  html  body   animate  scrollTop  0   duration           return false

User · Answer

There is no need to javascript  event if you wanted to animate the scroll action  CSS  html       scroll-behavior  smooth     HTML   lt html gt     lt body gt        lt a id  quot top quot  gt  lt  a gt        lt  -- your document -- gt        lt a href  quot  top quot  gt Jump to top of page lt  a gt     lt  body gt   lt  html gt

User · Answer

If you don t need the change to animate then you don t need to use any special plugins - I d just use the native JavaScript window scrollTo   method -- passing in 0  0 will scroll the page to the top left instantly  window scrollTo xCoord  yCoord    Parameters  xCoord is the pixel along the horizontal axis  yCoord is the pixel along the vertical axis

User · Answer

lt script gt        a href   top     click function             html  body   animate   scrollTop  0     slow         return false         lt  script gt    in html   lt a href   top  gt go top lt  a gt

User · Answer

You don t need jQuery to do this  A standard HTML  tag will suffice      lt div id  jump to me  gt      blah blah blah  lt  div gt    lt a target   jump to me  gt Click Here To Destroy The World  lt  a gt

User · Answer

Simply use this script for scroll to top direct    lt script gt    document  ready function           button   click function                body   scrollTop 0                 lt  script gt

User · Answer

For scrolling to the element and element being at the top of the page  WebElement tempElement driver findElement By cssSelector  input value  Excel                      JavascriptExecutor  driver  executeScript  arguments 0  scrollIntoView true     tempElement

User · Answer

If you d like to scroll to any element with an ID  try this      a href         bind  click smoothscroll  function  e        e preventDefault        var target   this hash       target     target          html  body   stop   animate            scrollTop    target offset   top        700   swing   function              window location hash   target

User · Answer

Really strange  This question is active for five years now and there is still no vanilla JavaScript answer to animate the scrolling    So here you go   var scrollToTop   window setInterval function         var pos   window pageYOffset      if   pos  gt  0             window scrollTo  0  pos - 20       how far to scroll on each step       else           window clearInterval  scrollToTop             16      how fast to scroll  this equals roughly 60 fps    If you like  you can wrap this in a function and call that via the onclick attribute  Check this jsfiddle  Note  This is a very basic solution and maybe not the most performant one  A very elaborated example can be found here  https   github com cferdinandi smooth-scroll

User · Answer

Pure JavaScript solution   function scrollToTop       window scrollTo       top  0      behavior   smooth        I write an animated solution on Codepen  Also  you can try another solution with CSS scroll-behavior  smooth property   html       scroll-behavior  smooth      media  prefers-reduced-motion  reduce        html           scroll-behavior  auto

User · Answer

All of these suggestions work great for various situations  For those who find this page through a search  one can also give this a try  JQuery  no plug-in  scroll to element      html  body   animate       scrollTop      elementID   offset   top    2000

User · Answer

If you want to do smooth scrolling  please try this      a   click function             html  body   animate   scrollTop  0     slow         return false        Another solution is JavaScript window scrollTo method     window scrollTo x-value  y-value     Parameters     x-value is the pixel along the horizontal axis  y-value is the pixel along the vertical axis

User · Answer

Just Try  no need other plugin   frameworks    x000D   x000D  document getElementById  jarscroolbtn   addEventListener  click   jarscrollfunction   x000D   x000D  function jarscrollfunction     x000D    var body   document body     For Safari x000D    var html   document documentElement     Chrome  Firefox  IE and Opera  x000D    body scrollTop   0   x000D    html scrollTop   0  x000D    x000D   lt button id  jarscroolbtn  gt Scroll contents lt  button gt   x000D   x000D   x000D    x000D   x000D  html  body   x000D    scroll-behavior  smooth  x000D    x000D   x000D   x000D

User · Answer

x000D   x000D      scrolltop   click function     x000D       html  body   animate   scrollTop  0     slow    x000D    return false  x000D      x000D   section  x000D   height 400px  x000D    x000D   section1  x000D    background-color   333  x000D    x000D   section2  x000D    background-color  red  x000D    x000D   section3  x000D    background-color  yellow  x000D    x000D   section4  x000D    background-color  green  x000D    x000D   scrolltop  x000D    position fixed  x000D    right 10px  x000D    bottom 10px  x000D    color  fff  x000D    x000D   lt html gt  x000D   lt head gt  x000D   lt title gt Scroll top demo lt  title gt  x000D   lt script src  https   code jquery com jquery-3 3 1 js  gt  lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt div class  content-wrapper  gt  x000D   lt div class  section section1  gt  lt  div gt  x000D   lt div class  section section2  gt  lt  div gt  x000D   lt div class  section section3  gt  lt  div gt  x000D   lt div class  section section4  gt  lt  div gt  x000D   lt a class  scrolltop  gt Scroll top lt  a gt  x000D   lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

When top scroll is top less than limit bottom and bottom to top scroll Header is Sticky  Below See Fiddle Example   var lastScroll   0     document  ready function         window  scroll function      setTimeout function          var scroll     window  scrollTop        if  scroll  gt  lastScroll                header   removeClass  menu-sticky                if  scroll    0           header   removeClass  menu-sticky               else if  scroll  lt  lastScroll - 5                 header   addClass  menu-sticky               lastScroll   scroll        0                    https   jsfiddle net memdumusaib d52xcLm3

User · Answer

Better solution with smooth animation      this changes the scrolling behavior to  smooth  window scrollTo   top  0  behavior   smooth        Reference  https   developer mozilla org en-US docs Web API Window scrollTo Example

User · Answer

You dont need JQuery  Simply you can call the script  window location         on click of the  Go to top  button  Sample demo    output jsbin com fakumo   PS  Don t use this approach  when you are using modern libraries like angularjs  That might broke the URL hashbang

User · Answer

You could simply use a target from your link  such as  someid  where  someid is the div s id   Or  you could use any number of scrolling plugins that make this more elegant   http   plugins jquery com project ScrollTo is an example

User · Answer

If you don t want smooth scrolling  you can cheat and stop the smooth scrolling animation pretty much as soon as you start it    like so        document  ready function              a href   top     click function                  html  body   animate   scrollTop  0     1                               html  body   stop true  true                Anything else you want to do in the same action goes here            return false                                                  I ve no idea whether it s recommended allowed  but it works     When would you use this  I m not sure  but perhaps when you want to use one click to animate one thing with Jquery  but do another without animation  ie open a slide-in admin login panel at the top of the page  and instantly jump to the top to see it

[javascript] Scroll to the top of the page using JavaScript?

Examples related to javascript

Examples related to scroll