How to Jump to Top of Browser Page

How to jump to top of browser page

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

Scroll to the top of the page using JavaScript?

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.

How to get to the top of page without scrolling

if your aim is to avoid the actual scrolling (the "animation"), use behavior: 'instant'.

const button = document.getElementById('instant-top-button')
button.addEventListener('click', () => window.scrollTo({
  top: 0,
  behavior: 'instant',
}))

<p>scroll down ⭳</p>
<p>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</p>
<button id="instant-top-button">⭱ to top, instantly!</button>

How to scroll to top of page with JavaScript/jQuery?

Wow, I'm 9 years late to this question. Here you go:

Add this code to your onload.

// This prevents the page from scrolling down to where it was previously.
if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
}
// This is needed if the user scrolls down during page load and you want to make sure the page is scrolled to the top once it's fully loaded. This has Cross-browser support.
window.scrollTo(0,0);

To run it on window load just put it wrap it like this (assumes you have JQuery referenced)

$(function() {
  // put the code here
});

history.scrollRestoration Browser support:

Chrome: supported (since 46)

Firefox: supported (since 46)

Edge: supported (since 79)

IE: not supported

Opera: supported (since 33)

Safari: supported

For IE if you want to re-scroll to the top AFTER it autoscrolls down then this worked for me:

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
if(isIE11) {
    setTimeout(function(){ window.scrollTo(0, 0); }, 300);  // adjust time according to your page. The better solution would be to possibly tie into some event and trigger once the autoscrolling goes to the top.
} 

Chrome doesn't always jump to #top while Firefox is doing fine

Instead of using anchors and links to them (because your anchors might change positions, or work different between browsers), you should use Javascript, using the window.scrollTo() function:

HTML

<button onclick="scrollToTop()">Go to Top</button>

Javascript

function scrollToTop(){
    window.scrollTo(0, 0);
}

Note that scrollTo() takes two parameters; the top and left position to scroll to. Also scrollTo() is not animated, it will scroll instantly to the position that you set.

Scroll to the top of the page using JavaScript?

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.

Force page scroll position to top at page refresh in HTML

You can do it using the scrollTop method on DOM ready:

$(document).ready(function(){
    $(this).scrollTop(0);
});

---

Related Topics