使用 javascript / jquery 滚动到页面顶部?

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.

转载于:https://stackoverflow.com/questions/1144805/scroll-to-the-top-of-the-page-using-javascript-jquery

30个回答

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.
csdnceshi69
YaoRaoLov Scroll to the bottom of the page window.scrollTo(0, document.body.scrollHeight);
4 年多之前 回复
csdnceshi54
hurriedly% and what if I want to scroll to the bottom of the page ?
4 年多之前 回复
csdnceshi80
胖鸭 Working for me in Firefox 40 and Chrome 44 (to address Mikhail's comment)
大约 5 年之前 回复
weixin_41568196
撒拉嘿哟木头 Not working for me in Firefox 30 and Chrome 36.
大约 6 年之前 回复
csdnceshi61
derek5. This answer has nothing to do with the question. It would be fine if the question was: What script and methods should I use to scroll to the top of the page? Correct answer is here: stackoverflow.com/questions/4147112/…
6 年多之前 回复
csdnceshi59
ℙℕℤℝ Funny as jeff's comment is honestly for people who just want things to work cross browser 95% of the time should just use jQuery. This is coming from someone who has to write a lot of pure javascript right now because we can't afford the overhead of a library slowing down ad code :(
7 年多之前 回复
csdnceshi55
~Onlooker That was my point, if you don't need to animate smooth scrolling then you don't need to use jQuery.
8 年多之前 回复

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.

csdnceshi61
derek5. Actually, window.pageYOffset would be the property of the window e̶l̶e̶m̶e̶n̶t̶ object.
大约 7 年之前 回复
csdnceshi52
妄徒之命 "html" and "body" are both required for browser compatibility, i.e. Chrome v27 scrolls with just "body" and IE8 does not. IE8 scrolls with just "html" but Chrome v27 does not.
7 年多之前 回复
weixin_41568196
撒拉嘿哟木头 So you've added html to the selector because, although by default it's in body, it may be moved outside, to the html?
7 年多之前 回复
csdnceshi53
Lotus@ It's not necessary, check stackoverflow.com/a/16430109/544283.
7 年多之前 回复
weixin_41568196
撒拉嘿哟木头 Do you know why it's necessary to add html & body in the selector?
7 年多之前 回复
csdnceshi79
python小菜 $("html, body").animate({ scrollTop: 0 }, "slow"); is working
7 年多之前 回复
csdnceshi65
larry*wei This does not work correctly when using animate's complete callback, as it will run it twice.
8 年多之前 回复
csdnceshi80
胖鸭 api.jquery.com/scrollTop for jQuery's scrollTop()
接近 9 年之前 回复
csdnceshi62
csdnceshi62 scrollTop is not function, it is a property of the window element
接近 11 年之前 回复
csdnceshi58
Didn"t forge +1. I was just wondering how to do something like this and google lead me here. QUestion though, where is "scrollTop" function in the docs? I just looked but couldn't find it.
11 年多之前 回复

Try this to scroll on top

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>

The old #top can do the trick

document.location.href = "#top";

Works fine in FF, IE and Chrome

weixin_41568183
零零乙 you should avoid navigation based solutions, see comments on Sriramajeyam's answer.
4 年多之前 回复
csdnceshi65
larry*wei Nice! Is there a way to make it smooth scroll ?
大约 5 年之前 回复

Try this

<script>
    $(window).scrollTop(100);
</script>

Simply use this script for scroll to top direct.

<script>
$(document).ready(function(){
    $("button").click(function(){
        ($('body').scrollTop(0));
    });
});
</script>

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

Non-jQuery solution / pure JavaScript:

document.body.scrollTop = document.documentElement.scrollTop = 0;

You can try using JS as in this Fiddle http://jsfiddle.net/5bNmH/1/

Add the "Go to top" button in your page footer:

<footer>
    <hr />
    <p>Just some basic footer text.</p>
    <!-- Go to top Button -->
    <a href="#" class="go-top">Go Top</a>
</footer>

Motivation

This simple solution works natively and implements a smooth scroll to any position.

It avoids using anchor links (those with #) that, in my opinion, are useful if you want to link to a section, but are not so comfortable in some situations, specially when pointing to top which could lead to two different URLs pointing to the same location (http://www.example.org and http://www.example.org/#).

Solution

Put an id to the tag you want to scroll to, for example your first section, which answers this question, but the id could be placed everywhere in the page.

<body>
  <section id="top">
    <!-- your content -->
  </section>
  <div id="another"><!-- more content --></div>

Then as a button you can use a link, just edit the onclick attribute with a code like this.

<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>

Where the argument of document.getElementById is the id of the tag you want to scroll to after click.

csdnceshi68
local-host you welcome, I found it on MDN, so thanks to Mozilla. It is awesome how many things are already there, supported natively. I love vanilla JS.
2 年多之前 回复
csdnceshi67
bug^君 Thanks you! is great solution
2 年多之前 回复
共30条数据 1 3 尾页
立即提问
相关内容推荐