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

发布于 2024-10-30 23:40:10 字数 276 浏览 2 评论 0原文

现在我正在使用这个：

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

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

有更好的方法吗？

原文

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.

Is there a better way to do this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柳若烟 2024-11-06 23:40:10

您将从点击函数返回 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; 
    });
});

You're returning true from the click function, so it won't prevent the default browser behaviour (i.e. navigating to thego-to-top anchor. As Mark has said, use:

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

回复收藏 0 原文

沉鱼一梦 2024-11-06 23:40:10

为了让它在 Opera 中工作，这个答案证明很有帮助。

将其与您的 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< /代码>

To get it to work in opera this answer proved helpful.

Putting that with your click()

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

Code example on jsfiddle.

Side note if 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:

$('#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-top your markup will be invalid, try switching it to a class .go-to-top

回复收藏 0 原文

揽清风入怀 2024-11-06 23:40:10

也许类似于

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

应该涵盖所有浏览器！

maybe something like

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

aswell as the html one.

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!

回复收藏 0 原文

掌心的温暖 2024-11-06 23:40:10

嗯...奇怪的是，使用 jsFiddle 我可以让它在 Opera（版本 11.01）中正常工作，但在 Chrome 中它只是跳到顶部并且不会像您想要的那样对其进行动画处理。

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

我希望这能有所帮助，尽管这并不是真正的答案。

如果我所做的不是您的 html 等的样子，请更新并添加它。

最好的问候，

Christian

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

回复收藏 0 原文

高速公鹿 2024-11-06 23:40:10

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

它可以跨浏览器工作

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

It works cross-browser

回复收藏 0 原文

老旧海报 2024-11-06 23:40:10

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

This will be working in all browsers. It avoids the hash tag on the url, so, the smooth scroll is done!

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

回复收藏 0 原文

万水千山粽是情ミ 2024-11-06 23:40:10

我正在用这个，这个也简单

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

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

回复收藏 0 原文

沒落の蓅哖 2024-11-06 23:40:10

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

禁用 JavaScript 后，它只是页面底部到锚点顶部的链接。
（# as 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);

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

With JavaScript enabled:

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 href attribute and add click handler for smooth scrolling.
(keeps URL and browser history tidy and I need no return or preventDefault in the scrolling function)
Fade div in / out depending on scroll position:
Display link only if scroll position > window height.
Update the position on resize.

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

回复收藏 0 原文

~没有更多了~