How to Scroll to Top of Page With JavaScript/Jquery

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

JQuery scroll to top of page

Try this:

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

You can do this with 0 instead of 300 to be instant, but this gives a quick auto-scroll effect.

jQuery scroll to top shows the button without scrolling the page

Try this code

jQuery(document).ready(function($){

// hide the topbutton on page load/ready.
$('.TopButton').hide();

//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.TopButton').show().fadeIn();
} else {
$('.TopButton').fadeOut().hide();
}
});
//Click event to scroll to top
$('.TopButton').click(function(){
$('html, body').animate({scrollTop : 0},360);
return false;
});
});

How to scroll to top of my single pages with jQuery?

try this code...where id is the wrap

            var id = "get your id here";
jQuery("html, body").animate({
scrollTop : jQuery(id).offset().top
}, 1800);

Thanks !

Smooth scroll to top of page

Use the onclick-Event:

<header id="top">....</header>
<div style="background-color: red; height: 1200px"></div>
<footer>
<a style="cursor:pointer;" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })"><img class="to-top" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Feather-arrows-arrow-up.svg/24px-Feather-arrows-arrow-up.svg.png"></a>
</footer>

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.

Scroll to an element with jQuery

Assuming you have a button with the id button, try this example:

$("#button").click(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});

I got the code from the article Smoothly scroll to an element without a jQuery plugin. And I have tested it on the example below.

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#click").click(function (){
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 2000);
});
});
</script>
<div id="div1" style="height: 1000px; width 100px">
Test
</div>
<br/>
<div id="div2" style="height: 1000px; width 100px">
Test 2
</div>
<button id="click">Click me</button>
</html>

How do I scroll to the top of the page with JavaScript

Use window.scrollTo(x, y) where x and y are horizontal and vertical offsets in pixels.

JQuery - Scroll to top of page, then reload

This should be of help

$("a[href='#top']").click(async () => { await $("html, body").animate({ scrollTop: 0 }, "slow"); await setTimeout( () => {  location.reload(true); },300);});
<!DOCTYPE html><html><head><script src="//code.jquery.com/jquery-1.11.1.min.js"></script>  <meta charset="utf-8">  <title>Scroll to the top of the page with jQuery</title></head><body>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p>  <p>jquery</p><a href='#top'>Go Top</a>  </body></html>


Related Topics



Leave a reply



Submit