How to animate scrolling to top of page using javascript (no jQuery)?

Question

I would like execute a transition when pressing a button for the webpage to slowly scroll back to the top of the page. I know how to execute a transition using a change in class, but in this instance, how would i do it?

document.documentElement.scrollTop = 0;

Possible duplicate of Cross browser JavaScript (not jQuery...) scroll to top animation — לבני מלכה
– לבני מלכה, Commented Jul 26, 2018 at 10:13

Anarion · Accepted Answer · 2018-07-26 11:53:01Z

9

document.body.scrollIntoView({behavior: 'smooth', block: 'start'});

Works also for any other DOM element. And for horizontal scrolling too.

answered Jul 26, 2018 at 11:53

Anarion

1,0386 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Guokas Over a year ago

it's a very convenient way. By the way, can you explain more parameter meanings of scrollIntoView

Phil Tune Over a year ago

Nice little working draft (experimental) API. Not as fine-grained usage as a library, but good out-of-the-box, jQuery alternative. No IOS and Safari support, and of course IE (doesn't support smooth scrolling, which is the point of this question), but nice toolbelt addition for quick demos.

Alessio Cantarella · Accepted Answer · 2018-07-26 11:10:59Z

-2

You can use below code to move the top of the page.

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  background: #ffffff;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<div style="padding:30px">Scroll Down</div>
<div style="padding:30px 30px 700px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

edited Jul 26, 2018 at 11:10

Alessio Cantarella

5,2413 gold badges31 silver badges37 bronze badges

answered Jul 26, 2018 at 10:43

Kiran Ghatage

4071 gold badge8 silver badges15 bronze badges

1 Comment

Phil Tune Over a year ago

Hi, this doesn't answer how to transition (i.e. animate the scroll), only how to snap to a value. But thank for for writing this out.

Collectives™ on Stack Overflow

How to animate scrolling to top of page using javascript (no jQuery)?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related