jQuery 滚动到页面顶部
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/10745485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scroll to top of page
提问by James Wilson
Is there a simple way to force the browser to scroll to the top if a button is clicked?
如果单击按钮,是否有一种简单的方法可以强制浏览器滚动到顶部?
I have tried
我试过了
jQuery('html').scrollTop();
jQuery('body').scrollTop();
jQuery(window).scrollTop();
None of them seem to scroll to the top of the page.
他们似乎都没有滚动到页面顶部。
回答by Fresheyeball
Due to cross browser oddness, some browsers will respond to 'html'
and some to 'body'
. And maybe its just my luck, but .scrollTop(0)
has never worked for me to move the page. Give this a shot:
由于跨浏览器奇怪,一些浏览器会回应'html'
和一些人'body'
。也许这只是我的运气,但.scrollTop(0)
从来没有让我移动页面。试一试:
jQuery('html,body').animate({scrollTop:0},0);
This version is tested and cross browser for all desktop browsers, and mobile devices.
此版本已针对所有桌面浏览器和移动设备进行测试和跨浏览器。
回答by Mario
Simple pure javascript, also works in mobile
简单的纯 javascript,也适用于移动设备
window.scrollTo(0,0);
回答by VisioN
You can use either this:
您可以使用以下任一方法:
jQuery('body').scrollTop(0);
or this:
或这个:
jQuery(window).scrollTop(0);
or finally this:
或者最后这个:
jQuery('html').scrollTop(0);
So, in order to call the scrollTop
method and make your page scrolling you should pass an argument with the numeric value representing the scrollTop position. Otherwise it will work as if you need to get the scrollTop position.
因此,为了调用该scrollTop
方法并使页面滚动,您应该传递一个带有表示 scrollTop 位置的数值的参数。否则它将像您需要获取 scrollTop 位置一样工作。
Two last methods should work constantly in all browsers, while the first might not work in some versions of IE.
最后两种方法应该在所有浏览器中都能正常工作,而第一种方法在某些版本的 IE 中可能不起作用。
回答by Ken Prince
Since nobody mentioned the required HTML I'll add it here.
由于没有人提到所需的 HTML,我将在此处添加。
First create your anchor element:
首先创建你的锚元素:
<a href="#" title="Scroll to Top" class="ScrollTop">Scroll To Top</a>
<a href="#" title="Scroll to Top" class="ScrollTop">Scroll To Top</a>
Note the class is referenced by the following jQuery.
请注意,以下 jQuery 引用了该类。
Then add your jQuery:
然后添加你的jQuery:
$(document).ready(function(){
$('.ScrollTop').click(function() {
$('html, body').animate({scrollTop: 0}, 800);
return false;
});
});
To adjust the speed of the animation change the "800" value.
要调整动画的速度,请更改“800”值。
回答by Jashwant
This is the cross browser way,
这是跨浏览器的方式,
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
var scrollElem = scrollableElement('html', 'body');
$(scrollElem).scrollTop(0);
Code from css-tricks
来自 css-tricks 的代码