Javascript jQuery 跨浏览器“滚动到顶部”，带动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5580350/
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
jQuery cross-browser "scroll to top", with animation
提问by Alex
Right now I'm using this:
现在我正在使用这个：
$('#go-to-top').each(function(){
$(this).click(function(){
$('html').animate({ scrollTop: 0 }, 'slow'); return true;
});
});
which doesn't work in Chrome, and in Opera I get a small flicker: the browser instantly scrolls to the top, then back to the bottom and then it begins to scroll slowly back to top, like it should.
这在 Chrome 中不起作用，在 Opera 中我得到一个小闪烁：浏览器立即滚动到顶部，然后回到底部，然后它开始缓慢滚动回顶部，就像它应该的那样。
Is there a better way to do this?
有一个更好的方法吗？
回答by BenM
You're returning truefrom the click function, so it won't prevent the default browser behaviour (i.e. navigating to thego-to-topanchor. As Mark has said, use:
您正在true从 click 函数返回，因此它不会阻止默认浏览器行为（即导航到go-to-top锚点。正如马克所说，使用：
$('html,body').animate({ scrollTop: 0 }, 'slow');
$('html,body').animate({ scrollTop: 0 }, 'slow');
So your code should now look like:
所以你的代码现在应该是这样的：
$('#go-to-top').each(function(){
$(this).click(function(){
$('html,body').animate({ scrollTop: 0 }, 'slow');
return false;
});
});
回答by Mark Coleman
To get it to work in opera this answerproved helpful.
为了让它在歌剧中工作，这个答案被证明是有帮助的。
Putting that with your click()
把它和你的 click()
$(this).click(function() {
$(window.opera ? 'html' : 'html, body').animate({
scrollTop: 0
}, 'slow');
});
Side noteif all you are doing with the .each()is assigning a click handler you do not need to iterate over the collection it can be simplified to this:
旁注，如果你所做的.each()只是分配一个点击处理程序，你不需要遍历集合，它可以简化为：
$('#go-to-top').click(function(){
$(window.opera ? 'html' : 'html, body').animate({
scrollTop: 0
}, 'slow');
});
Also if there is more than one element with id #go-to-topyour markup will be invalid, try switching it to a class .go-to-top
此外，如果有多个带有 id#go-to-top的元素，您的标记将无效，请尝试将其切换为一个类.go-to-top
回答by Xand94
maybe something like
也许像
$('body').animate({scrollTop:0}, 'slow');
aswell as the html one.
以及 html 之一。
edit >
编辑 >
$('#go-to-top').each(function(){
$(this).click(function(){
$('html').animate({ scrollTop: 0 }, 'slow'); return true;
$('body').animate({ scrollTop: 0 }, 'slow'); return true;
$('document').animate({ scrollTop: 0 }, 'slow'); return true;
$('window').animate({ scrollTop: 0 }, 'slow'); return true;
});
});
should cover all browsers!
应该涵盖所有浏览器！
回答by Holger
Hm... strange, with jsFiddle I can get it to work fine in Opera (ver 11.01), but in Chrome it just jumps up to the top and doesn't animate it like you want to.
嗯......奇怪，使用 jsFiddle 我可以让它在 Opera（11.01 版）中正常工作，但在 Chrome 中它只是跳到顶部并且不会像你想要的那样动画。
You can se the jsFiddle here if you want to: http://jsfiddle.net/H7RFU/
如果您愿意，您可以在此处查看 jsFiddle：http: //jsfiddle.net/H7RFU/
I hope that helps a bit, though it's not really an answer.
我希望这会有所帮助，尽管这不是真正的答案。
If what I have made isn't what your html etc looks like, please update it and add it.
如果我所做的不是你的 html 等，请更新并添加它。
Best regards,
此致，
Christian
基督教
Caveat: I haven't used the save function of jsFiddle before so I dunno for how long it it saved.
警告：我之前没有使用过 jsFiddle 的保存功能，所以我不知道它保存了多长时间。
回答by user2122751
$(window).animate({ scrollTop: 0 }, 'slow');
It works cross-browser
它跨浏览器工作
回答by Mohamed Arshath
This will be working in all browsers. It avoids the hash tag on the url, so, the smooth scroll is done!
这将适用于所有浏览器。它避免了 url 上的哈希标签，因此，平滑滚动完成！
$('#back-top a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
回答by Sajjad Hossain
I am using this, This is also simple
我正在使用这个，这也很简单
$(document).ready(function(e) {
var a = 400,
t = 1200,
l = 700,
s = e(".scrool-top");
e(window).scroll(function() {
e(this).scrollTop() > a ? s.addClass("scrool-is-visible") : s.removeClass("scrool-is-visible scrool-fade-out"), e(this).scrollTop() > t && s.addClass("scrool-fade-out")
}), s.on("click", function(a) {
a.preventDefault(), e("body,html").animate({
scrollTop: 0
}, l)
})
})
回答by Titus
I have a smooth solution in two ways: smooth scrolling and a smooth button.
我有两种方式的平滑解决方案：平滑滚动和平滑按钮。
With JavaScript disabled, it′s just a link on the bottom of the page to the anchor top.
(#as href can be pretty unstable.)
禁用 JavaScript 后，它只是页面底部到锚点的链接top。
（#因为 href 可能非常不稳定。）
With JavaScript enabled:
启用 JavaScript：
- Hide the div containing the link (to avoid flickering).
- Fix the position of the div at the bottom right border of the window.
- Remove the
hrefattribute and addclickhandler for smooth scrolling. (keeps URL and browser history tidy and I need noreturnorpreventDefaultin the scrolling function) - Fade div in / out depending on scroll position:
Display link only if scroll position > window height. - Update the position on resize.
- 隐藏包含链接的 div（以避免闪烁）。
- 固定div在窗口右下边框的位置。
- 删除
href属性并添加click处理程序以实现平滑滚动。（保持 URL 和浏览器历史整洁，我不需要return或preventDefault在滚动功能中） - 根据滚动位置淡入/淡出 div：
仅当滚动位置 > 窗口高度时才显示链接。 - 更新调整大小的位置。
HTML
HTML
<body>
<a name="top"></a>
...
<div id="scrolltotop" style="display:block;text-align:right">
<a href="#top" title="scroll to top"><img src="scrolltotop.png" alt="scroll to top"></a>
</div>
</body>
jQuery
jQuery
function scrolltotop_display()
{
var el=$('#scrolltotop');
if((window.pageYOffset||document.documentElement.scrollTop)>window.innerHeight)
{ if(!el.is(':visible')) { el.stop(true, true).fadeIn(); } }
else { if(!el.is(':animated')) { el.stop(true, true).fadeOut(); }}
}
function scrolltotop_position()
{
var el=$('#scrolltotop');
el.css('top', window.innerHeight-100);
el.css('left', window.innerWidth-100);
scrolltotop_display();
}
$(window).on('load', function(){
$('#scrolltotop').css('display', 'none');
$('#scrollToTop').css('position', 'fixed');
scrolltotop_position();
$('#scrollToTop a').removeAttr('href');
$('#scrollToTop a').on('click', function(){$('html, body').animate({scrollTop:0}, 500);});
});
$(window).on('scroll', scrolltotop_display);
$(window).on('resize', scrolltotop_position);
