Scroll to the top of the page using JavaScript/jQuery?

0 votes
asked Jul 17, 2009 by kingnestor

I've a <button> on the page, when this button is pressed a hidden <div> is shown using jQuery.

How do I scroll to the top of the page using a JavaScript/jQuery command in that function? It is desirable even if the scroll bar instantly jumps to the top. I'm not looking for a smooth scrolling.

30 Answers

0 votes
answered Jan 17, 2009 by scotte

You could simply use a target from your link, such as #someid, where #someid is the div's id.

Or, you could use any number of scrolling plugins that make this more elegant.

http://plugins.jquery.com/project/ScrollTo is an example.

0 votes
answered Jul 17, 2009 by daniellmb

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(x-coord, y-coord);

Parameters

  • x-coord is the pixel along the horizontal axis.
  • y-coord is the pixel along the vertical axis.
0 votes
answered Jul 17, 2009 by mathew

You don't need jQuery to do this. A standard HTML tag will suffice...

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>
0 votes
answered Jul 17, 2009 by mark-ursino

If you do want smooth scrolling, try something like this:

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

That will take any <a> tag whose href="#top" and make it smooth scroll to the top.

0 votes
answered Jul 1, 2010 by luiggi-zamol

With window.scrollTo(0, 0); is very fast
so i tried the Mark Ursino example, but in Chrome nothing happens
and i found this

$('.showPeriodMsgPopup').click(function(){
    //window.scrollTo(0, 0);
    $('html').animate({scrollTop:0}, 'slow');//IE, FF
    $('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
    $('.popupPeriod').fadeIn(1000, function(){
        setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
    });
});

tested all 3 browsers and it works
i'm using blueprint css
this is when a client clicks "Book now" button and doesn't have the rental period selected, slowly moves to the top where the calendars are and opens a dialog div pointing to the 2 fields, after 3sec it fades

0 votes
answered Jan 1, 2011 by renjith

Try this

<script>
    $(window).scrollTop(100);
</script>
0 votes
answered Jan 31, 2012 by hari-ganesan

$(document).scrollTop(0); also works.

0 votes
answered Jul 21, 2012 by mehmood

Try this to scroll on top

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>
0 votes
answered Jul 23, 2012 by d-alexander

All of these suggestions work great for various situations. For those who find this page through a search, one can also give this a try. JQuery, no plug-in, scroll to element.

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);
0 votes
answered Jan 19, 2013 by alan-kael-ball

If you'd like to scroll to any element with an ID, try this:

$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 700, 'swing', function () {
        window.location.hash = target;
    });
});``
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...