How to jump to top of browser page

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?

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');

Without animation, you can use plain JS:

scroll(0,0)

With animation, check Nick's answer.

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.

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

Vanilla Javascript solution

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

If you want smooth scrolling

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

// 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>

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.

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

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