使用 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.
csdnceshi54
hurriedly% Scroll to the bottom of the page window.scrollTo(0, document.body.scrollHeight);
大约 4 年之前 回复
csdnceshi56
lrony* and what if I want to scroll to the bottom of the page ?
4 年多之前 回复
csdnceshi75
衫裤跑路 Working for me in Firefox 40 and Chrome 44 (to address Mikhail's comment)
接近 5 年之前 回复
weixin_41568131
10.24 Not working for me in Firefox 30 and Chrome 36.
接近 6 年之前 回复
csdnceshi50
三生石@ 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 年多之前 回复
csdnceshi55
~Onlooker 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 年之前 回复
csdnceshi73
喵-见缝插针 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.

csdnceshi68
local-host Actually, window.pageYOffset would be the property of the window e̶l̶e̶m̶e̶n̶t̶ object.
接近 7 年之前 回复
weixin_41568184
叼花硬汉 "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 年之前 回复
csdnceshi71
Memor.の 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 年多之前 回复
csdnceshi71
Memor.の Do you know why it's necessary to add html & body in the selector?
7 年多之前 回复
csdnceshi60
℡Wang Yan $("html, body").animate({ scrollTop: 0 }, "slow"); is working
7 年多之前 回复
csdnceshi80
胖鸭 This does not work correctly when using animate's complete callback, as it will run it twice.
大约 8 年之前 回复
csdnceshi70
笑故挽风 api.jquery.com/scrollTop for jQuery's scrollTop()
8 年多之前 回复
csdnceshi54
hurriedly% scrollTop is not function, it is a property of the window element
10 年多之前 回复
csdnceshi77
狐狸.fox +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>

Really strange: This question is active for five years now and there is still no vanilla JavaScript answer to animate the scrolling… So here you go:

var scrollToTop = window.setInterval(function() {
    var pos = window.pageYOffset;
    if ( pos > 0 ) {
        window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
    } else {
        window.clearInterval( scrollToTop );
    }
}, 16); // how fast to scroll (this equals roughly 60 fps)

If you like, you can wrap this in a function and call that via the onclick attribute. Check this jsfiddle

Note: This is a very basic solution and maybe not the most performant one. A very elaborated example can be found here: https://github.com/cferdinandi/smooth-scroll

weixin_41568184
叼花硬汉 Best solution for me. No plugins, no bulky jquery library just straightforward javascript. Kudos
接近 4 年之前 回复
weixin_41568174
from.. The question explicitly asks for a jQuery solution though. so not strange
接近 6 年之前 回复

Try this

<script>
  $(function(){
   $('a').click(function(){
    var href =$(this).attr("href");
   $('body, html').animate({
     scrollTop: $(href).offset().top
     }, 1000)
  });
 });
 </script>

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.

Active all Browser. Good luck

var process;
        var delay = 50; //milisecond scroll top
        var scrollPixel = 20; //pixel U want to change after milisecond
        //Fix Undefine pageofset when using IE 8 below;
        function getPapeYOfSet() {
            var yOfSet = (typeof (window.pageYOffset) === "number") ? window.pageYOffset : document.documentElement.scrollTop;
            return yOfSet;
        }



        function backToTop() {
            process = setInterval(function () {
                var yOfSet = getPapeYOfSet();
                if (yOfSet === 0) {
                    clearInterval(process);
                } else {
                    window.scrollBy(0, -scrollPixel);
                }
            }, delay);
        }

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

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

in html

<a href="#top">go top</a>

Try this code:

$('html, body').animate({
    scrollTop: $("div").offset().top
}, time);

div => Dom Element where you want to move scroll.

time => milliseconds, define the speed of the scroll.

共30条数据 1 3 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问