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

现在我正在使用这个：

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

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

有一个更好的方法吗？

Answer 1

你从click函数返回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

为了让它在歌剧中运作，这个答案certificate是有帮助的。

用你的click()

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

关于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之一。

编辑>

 $('#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的保存function所以我不知道它保存了多长时间。

Answer 5

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

它适用于跨浏览器

Answer 6

这将适用于所有浏览器。 它避免了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; } } }); 

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 。
（#the href可能非常不稳定。）

启用JavaScript后：

1. 隐藏包含链接的div（以避免闪烁）。
2. 将div的位置固定在窗口的右下角。
3. 删除href属性并添加click处理程序以进行平滑滚动。 （保持URL和浏览器历史记录整洁，我不需要在滚动function中return或阻止preventDefault ）
4. 根据滚动位置淡入/淡出div：
   仅在滚动位置>窗口高度时显示链接。
5. 在resize时更新位置。

HTML

   ... 
  
  

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