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_131944 · 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_134360 · 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 tag whose href="#top" and make it smooth scroll to the top.

user_1740102 · 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_108147 · Answer

You don't need jQuery to do this. A standard HTML tag will suffice...


    blah blah blah


Click Here To Destroy The World!

user_11401700 · Answer

Smooth scrolling & animation with vanilla Javascript, without jQuery

// Get the element
let topBtn = document.querySelector(".top-btn");

// On Click, Scroll to the page's top, replace 'smooth' with 'auto' if you don't want smooth scrolling
topBtn.onclick = () => window.scrollTo({ top: 0, behavior: "smooth" });

// On scroll, Show/Hide the btn with animation
window.onscroll = () => window.scrollY > 500 ? topBtn.style.opacity = 1 : topBtn.style.opacity = 0

body {
  background-color: #111;
  height: 5000px;
}

.top-btn {
  all: unset; 
  position: fixed;
  right: 20px;
  bottom: 20px;
  cursor: pointer;
  transform:scale(1.8);
  opacity: 0;
  transition: .3s;
}

user_10079189 · Answer

$(".scrolltop").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

.section{
 height:400px;
}
.section1{
  background-color: #333;
}
.section2{
  background-color: red;
}
.section3{
  background-color: yellow;
}
.section4{
  background-color: green;
}
.scrolltop{
  position:fixed;
  right:10px;
  bottom:10px;
  color:#fff;
}



Scroll top demo








Scroll top

user_7691891 · Answer

The equivalent solution in TypeScript may be as the following

   window.scroll({
      top: 0,
      left: 0,
      behavior: 'smooth'
    });

user_9875486 · Answer

Scroll to top of page with animation:

window.scrollTo({ top: 0, behavior: 'smooth' });

user_4627040 · 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_1217468 · 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.

Then as a button you can use a link, just edit the onclick attribute with a code like this.

Click me

Where the argument of document.getElementById is the id of the tag you want to scroll to after click.

user_6603082 · Answer

Simply use this script for scroll to top direct.

user_13363264 · Answer

You can use javascript's built in function `scrollTo`:

function scroll() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

user_10558868 · Answer

document.getElementById("elem").scrollIntoView();

user_112194 · 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_10494804 · Answer

There is no need to javascript, event if you wanted to animate the scroll action!

CSS:

html {
    scroll-behavior: smooth;
}

HTML:


  
     
     
     Jump to top of page

user_6777209 · Answer

Just Try, no need other plugin / frameworks

document.getElementById("jarscroolbtn").addEventListener("click", jarscrollfunction);

function jarscrollfunction() {
  var body = document.body; // For Safari
  var html = document.documentElement; // Chrome, Firefox, IE and Opera 
  body.scrollTop = 0; 
  html.scrollTop = 0;
}

html, body {
  scroll-behavior: smooth;
}

user_3637354 · Answer

document.getElementsByTagName('html')[0].scrollIntoView({ behavior: "smooth" });

user_860099 · 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_15120820 · Answer

A simple example of scroll to (using html is much more efficient but here is how to do it with JavaScript):

const btn = document.querySelector('.btn');
btn.addEventListener('click',()=>{
      window.scrollTo({
       left: 0,
       top: 0,
})})
window.addEventListener('scroll', function() {
    const scrollHeight = window.pageYOffset;
    if (scrollHeight > 500) {
        btn.classList.add('show-link');
    } else {
        btn.classList.remove('show-link');
    }
});

.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;

}

    
      
        Section One
      
    
    
      
        Section Two
      
    
    
      
        Section Three

user_11106681 · Answer

Please check the below code, surely it will be helpful. :)

document.querySelector('.sample-modal .popup-cta').scrollIntoView(true);
document.querySelector('.sample-modal').style.scrollPadding = '50px'; //to move to the top when scrolled up.

user_10651074 · Answer

Scroll to the top of the page using JavaScript?

48 Answers

Motivation

Solution

You can use javascript's built in function `scrollTo`:

Shortest

Back to Top with AplineJS and TailwindCSS:

Scroll to the top of the page using JavaScript?

48 Answers

Motivation

Solution

You can use javascript's built in function scrollTo:

Shortest

Back to Top with AplineJS and TailwindCSS:

You can use javascript's built in function `scrollTo`: