现在我正在使用这个：
$('#go-to-top').each(function(){
$(this).click(function(){
$('html').animate({ scrollTop: 0 }, 'slow'); return true;
});
});
这在 Chrome 中不起作用，在 Opera 中我得到一个小闪烁：浏览器立即滚动到顶部，然后回到底部，然后它开始慢慢滚动回到顶部，就像它应该的那样。
有一个更好的方法吗？
问问题
86978 次
8 回答
90
您正在true从点击功能返回，因此它不会阻止默认浏览器行为（即导航到go-to-top锚点。正如马克所说，使用：
$('html,body').animate({ scrollTop: 0 }, 'slow');
所以您的代码现在应该如下所示：
$('#go-to-top').each(function(){
$(this).click(function(){
$('html,body').animate({ scrollTop: 0 }, 'slow');
return false;
});
});
于 2011-04-07T11:41:24.500 回答
5
为了让它在歌剧中工作，这个答案被证明是有帮助的。
把它和你的click()
$(this).click(function() {
$(window.opera ? 'html' : 'html, body').animate({
scrollTop: 0
}, 'slow');
});
旁注如果您所做的.each()只是分配一个点击处理程序，您不需要遍历集合，它可以简化为：
$('#go-to-top').click(function(){
$(window.opera ? 'html' : 'html, body').animate({
scrollTop: 0
}, 'slow');
});
此外，如果有多个带有 id 的元素，#go-to-top您的标记将无效，请尝试将其切换到一个类.go-to-top
于 2011-04-07T11:36:49.660 回答
2
也许像
$('body').animate({scrollTop:0}, 'slow');
以及html之一。
编辑 >
$('#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;
});
});
应该涵盖所有浏览器！
于 2011-04-07T11:36:07.143 回答
1
嗯......奇怪，使用 jsFiddle 我可以让它在 Opera（11.01 版）中正常工作，但在 Chrome 中它只是跳到顶部并且不会像你想要的那样对其进行动画处理。
如果您愿意，可以在这里查看 jsFiddle：http: //jsfiddle.net/H7RFU/
我希望这会有所帮助，尽管这并不是真正的答案。
如果我所做的不是您的 html 等，请更新并添加它。
最好的祝福，
基督教
警告：我之前没有使用过 jsFiddle 的保存功能，所以我不知道它保存了多长时间。
于 2011-04-07T11:44:50.087 回答
1
$(window).animate({ scrollTop: 0 }, 'slow');
它可以跨浏览器工作
于 2013-03-01T08:30:35.420 回答
0
这将适用于所有浏览器。它避免了url上的hash标签，所以，平滑滚动就完成了！
$('#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;
}
}
});
于 2016-01-22T05:44:54.790 回答
0
我在用这个，这个也很简单
$(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)
})
})
于 2016-08-07T22:34:28.403 回答
0
我有两种流畅的解决方案：平滑滚动和平滑按钮。
禁用 JavaScript 后，它只是页面底部指向锚点的链接top。
（#因为 href 可能非常不稳定。）
启用 JavaScript：
- 隐藏包含链接的 div（以避免闪烁）。
- 将 div 的位置固定在窗口的右下边框。
- 删除
href属性并添加click处理程序以实现平滑滚动。（保持 URL 和浏览器历史记录整洁，我不需要return或preventDefault在滚动功能中） - 根据滚动位置淡入/淡出 div：
仅当滚动位置 > 窗口高度时才显示链接。 - 更新调整大小的位置。
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
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);
于 2018-07-18T11:06:04.767 回答