Question

现在我正在使用它：

$('#go-to-top').each(function(){
  $(this).click(function(){ 
    $('html').animate({ scrollTop: 0 }, 'slow'); return true; 
  });
});

在Chrome中不起作用，在Opera中我得到一个小闪烁：浏览器立即滚动到顶部，然后回到底部，然后它开始慢慢地滚动回顶部，就像应该的那样。

有更好的方法吗？

Answer 1

您从点击功能返回true，因此无法阻止默认的浏览器行为（即导航到go-to-top锚点。正如Mark所说，使用：

$('html,body').animate({ scrollTop: 0 }, 'slow');

所以你的代码现在应该是这样的：

$('#go-to-top').each(function(){
    $(this).click(function(){ 
        $('html,body').animate({ scrollTop: 0 }, 'slow');
        return false; 
    });
});

Answer 2

为了让它在歌剧中发挥作用，answer证明是有帮助的。

将其与click()

一起使用

$(this).click(function() {
    $(window.opera ? 'html' : 'html, body').animate({
        scrollTop: 0
    }, 'slow');
});

<强> Code example on jsfiddle

旁注如果你正在使用.each()所做的就是分配一个点击处理程序，你不需要迭代该集合就可以简化为：

$('#go-to-top').click(function(){ 
    $(window.opera ? 'html' : 'html, body').animate({
        scrollTop: 0
        }, 'slow');
});

此外，如果有多个ID为#go-to-top的元素，您的标记无效，请尝试将其切换为类.go-to-top

Answer 3

可能像

$('body').animate({scrollTop:0}, 'slow');

以及html。

编辑＆gt;

$('#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; 
  });
});

应涵盖所有浏览器！

Answer 4

嗯...很奇怪，有了jsFiddle我可以在Opera（版本11.01）中使它工作正常，但在Chrome中它只是跳到顶部并且不会像你想要的那样动画它。

如果您愿意，可以在此处查看jsFiddle： http://jsfiddle.net/H7RFU/

我希望这有点帮助，虽然这不是一个真正的答案。

如果我所做的不是你的html等，请更新并添加。

致以最诚挚的问候，

基督教

警告：我之前没有使用过jsFiddle的保存功能所以我不知道它保存了多长时间。

Answer 5

$(window).animate({ scrollTop: 0 }, 'slow');

它适用于跨浏览器

Answer 6

这将适用于所有浏览器。它避免了网址上的哈希标记，因此，顺利滚动就完成了！

 $('#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;
      }
    }
  });

Answer 7

我正在使用它，这也很简单

$(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)
})
})

Answer 8

我有两种解决方案：平滑滚动和平滑按钮。

在禁用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);

jQuery跨浏览器“滚动到顶部”，带有动画

8 个答案: