关于jQuery中scrollTop中的一些兼容问题。

最新推荐文章于 2023-06-17 13:58:23 发布

原创最新推荐文章于 2023-06-17 13:58:23 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #浏览器兼容

浏览器兼容专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在不同浏览器中都能正常工作的回顶按钮实现方法，通过使用jQuery库，结合对html和body元素的操作，确保了在IE9及以上、Firefox和Chrome等主流浏览器中的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个响应式的页面，需要有按钮来实现点击回到页头及点击回到页尾的功能。
在使用

$('#btn').click(function(){
   $(body).animate({
     scrollTop:0
   },speed);
});

//发现，该功能只在IE与FireFox下有用，Chrome内核无效。

这里写图片描述
即：

选择器为body时：FireFox无效，Chrome有效
选择器为html时：Chrome有效，FireFox无效

因此，在编写代码的时候，只要进行双重选择即可兼容：

$('#btn').on('click', function() {
                var speed = 400; //滑动的速度
                $('html,body').animate({
                    scrollTop: 0
                }, speed);
                return false;
            });

经测试，在IE(9及以上),FireFox及Chome浏览器下，均能正常使用该功能。