How to jump to top of browser page

Question

I'm writing a modal popup and I need the browser to jump to the top of the screen when the open modal button is pressed. Is there a way to scroll the browser to the top using jQuery?

score 453 · Accepted Answer · edited Jan 25 '13 at 20:41

453

You can set the scrollTop, like this:

$('html,body').scrollTop(0);

Or if you want a little animation instead of a snap to the top:

$('html, body').animate({ scrollTop: 0 }, 'fast');

edited Jan 25 '13 at 20:41

Community

1
1

answered Nov 10 '10 at 17:18

Nick Craver

623,446
136
1,297
1,155

1

good one... I've used scrollTo plugin for jQuery before to accomplish this - could've saved a bit of code with your code... thanks for the lesson ;-) – Zathrus Writer Nov 10 '10 at 18:21
@MikhailBatcer - disable your CSS and then see if it works. You might have an issue with how you've styled your `html` and `body` tags. otherwise use `$(window)` instead. – invot Mar 03 '16 at 19:21
how to add duration for animation-skrolling? – Maxim Strutinskiy Dec 06 '19 at 15:31

score 159 · Answer 2 · edited Jan 11 '19 at 10:52

159

Without animation, you can use plain JS:

scroll(0,0)

With animation, check Nick's answer.

edited Jan 11 '19 at 10:52

Mehdi Nellen

8,486
4
33
48

answered Nov 10 '10 at 17:22

Ionuț Staicu

21,360
11
51
58

4

Is this supported in all browsers? – Pacerier May 27 '13 at 12:56
1

`scroll` is in the CSSOM standard while `scrollTo` was originally defined in DOM Level 0 and not part of any standard. However, CSSOM includes `scrollTo` for backwards compatibility. – Clint Pachl May 14 '15 at 08:25
3

I think `scroll` is widely supported. See http://stackoverflow.com/q/1925671/41906 – Clint Pachl May 14 '15 at 08:26
1

Thanks. I guess `window && window.scroll(0,0);` is acceptable in my view model. – nrodic Jan 30 '17 at 17:35

score 44 · Answer 3 · answered Nov 10 '10 at 18:44

If you're using jQuery UI dialog, you could just style the modal to appear with the position fixed in the window so it doesn't pop-up out of view, negating the need to scroll. Otherwise,

var scrollTop = function() {
    window.scrollTo(0, 0);
};

should do the trick.

score 13 · Answer 4 · answered Nov 10 '10 at 17:58

13

You could do it without javascript and simply use anchor tags? Then it would be accessible to those js free.

although as you are using modals, I assume you don't care about being js free. ;)

answered Nov 10 '10 at 17:58

S.Kiers

4,086
3
32
38

3

Using anchor tags would interrupt hash-based navigation. – Tom Landau Jun 15 '17 at 13:55

Ahmad Moghazi · Answer 5 · 2021-09-18T07:42:55.967

10

Vanilla Javascript solution

theId.onclick = () => window.scrollTo({top: 0})

If you want smooth scrolling

theId.onclick = () => window.scrollTo({ top: 0, behavior: 'smooth' })

edited Sep 18 '21 at 07:42

answered Jun 08 '20 at 13:19

Ahmad Moghazi

1,419
13
15

score 4 · Answer 6 · answered Feb 17 '18 at 02:45

// 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() {
 
     $('html, body').animate({scrollTop:0}, 'slow');
}

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

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

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

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

score 3 · Answer 7 · answered Jun 19 '18 at 12:53

3

I know this is old, but for those having problems in Edge:

Plain JS: window.scrollTop=0;

Unfortunately, scroll() and scrollTo() throw errors in Edge.

answered Jun 19 '18 at 12:53

Josh Powlison

723
9
15

score 3 · Answer 8 · answered Mar 24 '21 at 21:47

As a couple responses hinted at, I had to use window.scrollTo(0,0); instead of scrollTo(0,0);

window.scrollTo(0,0); works with pure javascript in all browsers tested (no animation). (MDN) (w3schools).

Examples from MDN:

Without options:

window.scrollTo(0, 0);

Using options:

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

Here's a simple example using javascript inline with the html:

<button onclick="window.scrollTo(0, 0);">Click to scroll to top</button>

With smooth scrolling:

<button onclick="window.scrollTo({top: 0, left: 0, behavior: 'smooth'});">Smooth scroll</button>

Note:
It seems smooth scrolling isn't working by default in Chrome (e.g. in version 89) without first enabling
chrome://flags/#smooth-scrolling

window.scroll(0,0); seems similar to window.scrollTo(0,0); but with less compatibility for options. (reference).

score 1 · Answer 9 · answered Mar 08 '17 at 12:10

1

you're using jQuery UI dialog, you could just style the modal to appear with the position fixed in the window so it doesn't pop-up out of view, negating the need to scroll. Other

answered Mar 08 '17 at 12:10

gary

11
1

How to jump to top of browser page

9 Answers9

Linked