下载鸥 > 网站下载 > 开发教程 > JS/JQuery

jQuery滚动函数scrollTop无效的原因

543 2022-01-06 03:34:23

收藏
scrollTop是jQuery库的一个滚动函数,使用非常简单。但由于Chrome与Firefox的不同,用法上有一点区别。同样的代码,可能scrollTop在Chrome是生效的,换到Firefox就无效了
 

单一浏览器内核方法

如,下方的代码在Chrome会生效,但Firefox却会无效。
$("body").animate({scrollTop:0},800);
$("body").animate({scrollTop:$(document).height()},800);

这是为什么呢?因为二者写法略有出入。正确的写法如下。
//Chrome写法:
$("body").animate({"scrollTop":top});

//Firefox写法:
$("html").animate({"scrollTop":top});
 

兼容写法

那如果既要兼容Chrome,又要兼容Firefox要怎么写呢?
$("html,body").animate({scrollTop:0},800);
$("html,body").animate({scrollTop:$(document).height()},800);

是的,就是将两个元素放到一起。这样,就实现了Chrome与Firefox下scrollTop函数的正确使用。
 

附注:与overflow:hidden冲突

scrollTop函数与css的overflow相冲突。也就是说,如果body设置了overflow:hidden,scrollTop函数会失效。

本文地址:https://xzo.com.cn/develop/js/1066.html

有帮助,很赞!

信息来源:下载鸥
信息标签
导出教程 下载word版教程
发表评论 共有条评论
关于JS/JQuery


JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。

推荐JS/JQuery开发教程
通过原生的JS实现点击复制效果
通过原生的JS实现点击复制效果

对于网站、app开发等工作而言,复制是一个非常常见的功能。很多人到处找插件...

1 304
jQuery怎样监听鼠标滚动是向上还是向下的状态?
jQuery怎样监听鼠标滚动是向上还是向下的状态?

知乎鼠标向下滚动显示文章标题,向上滚动显示栏目;又或者向下滚动到底部时异步...

0 440
Superslide响应式页面直接应用手机端技巧介绍
Superslide响应式页面直接应用手机端技巧介绍

如果是响应式网站,那么用superslide做轮播图需要做两个,这无疑是非常不方便的...

1 347
swiper轮播图空白案例记录
swiper轮播图空白案例记录

今天鸥哥在用swiper做轮播图时,轮播效果虽然没问题,但只显示第一张,后面的图片...

0 280
js点击追加信息到textarea
js点击追加信息到textarea

通过灵活运用js,我们可以轻松实现点击追加相关信息到textarea的功能。这个功...

0 464
js判断windows操作系统还是mac os系统
js判断windows操作系统还是mac os系统

网站日常访客主要是windows和mac os两种操作系统,如果网站提供资源下载,则需...

0 1517
JS获取浏览器语言(中英文多语言站)并自动跳转代码
JS获取浏览器语言(中英文多语言站)并自动跳转代码

如果是多语言站点,主动获取浏览器默认语言并自动进行跳转可以有效降低跳出率...

0 748
jQuery怎样给图片添加默认域名?
jQuery怎样给图片添加默认域名?

在很多网站中,图片的默认路径是相对于根目录的绝对路径,如果是其他站点引用,则...

0 339
随机JS/JQuery开发教程
js关闭小窗口opener并刷新父页面
js关闭小窗口opener并刷新父页面

今天在开发的时候,发现程序默认的printerror函数会阻塞js命令,导致无法圆满的...

0 328
JS实现文字向上循环滚动特效
JS实现文字向上循环滚动特效

注册信息展示可以有效提升用户购买、注册欲望,使用js实现循环滚动,效果想当不...

1 805
jQuery控制视频在滑动到当前区域自动播放
jQuery控制视频在滑动到当前区域自动播放

怎样用jQuery控制视频在页面滑动到当前区域自动播放与暂停播放呢?...

0 292
jQuery判断今天是星期几并展示对应信息
jQuery判断今天是星期几并展示对应信息

一些功能比较高级的站点,需要自动展示信息。例如,自动判断今天是星期几,并根据...

1 275
自动切换导航高亮效果(基于jQuery)
自动切换导航高亮效果(基于jQuery)

在一些单页面站点中,网站的各个主模块都在同一个页面,点击导航可以页面内跳转...

0 305
JS判断访问域名并跳转
JS判断访问域名并跳转

很多时候,我们要防止资源盗用,此时可以通过js验证访问域名并跳转的方式处理。...

0 877
jQuery怎样给图片添加默认域名?
jQuery怎样给图片添加默认域名?

在很多网站中,图片的默认路径是相对于根目录的绝对路径,如果是其他站点引用,则...

0 339
JS获取浏览器语言(中英文多语言站)并自动跳转代码
JS获取浏览器语言(中英文多语言站)并自动跳转代码

如果是多语言站点,主动获取浏览器默认语言并自动进行跳转可以有效降低跳出率...

0 748
客服QQ:341553759
点击咨询 常见问题 >
官方交流群:90432500
点击加入