$("body").animate({"scrollTop":top})无效的问题
问题
我在个人站点的左下角和右下角各自使用了如下代码来将页面滚动到顶部和底部:
$("body").animate({scrollTop:0},800);
$("body").animate({scrollTop:$(document).height()},800);
最近才忽然发现在Chrome浏览器下,上面的代码没有问题,而在Firefox下却是无效的。百度后才知道,原来这是因为这两个浏览器自身的问题导致的。
对于Chrome而言,支持的是这种写法:
$("body").animate({"scrollTop":top});
而对于Firefox,则是支持如下写法:
$("html").animate({"scrollTop":top});
之前就一直耳闻前端开发需要兼容不同浏览器,非常地麻烦,今天算是见识到了冰山一角。
解决方法
既然这两个浏览器各自支持一种标签选择器,那么只要把两者统合起来即可实现兼容:
$("html,body").animate({"scrollTop":top});
最终,将我的代码改成如下形式便没问题了:
$("html,body").animate({scrollTop:0},800);
$("html,body").animate({scrollTop:$(document).height()},800);
参考链接
随机推荐
- ActiveMQ持久化机制
用户注册成功后发短信提醒 同步http 异步mq JMS中两种通讯模式: 发布订阅 一对多 topic 去过消费者集群的话 都会消费 消息队列 点对点 queue 去过消费者集群的话 ...
- 修改织梦DedeCms文章页默认title的方法
<title>{dede:field.title/}_{dede:field name='typeid' runphp='yes'}$id=@me;global $dsql;$sql=&q ...
- RQNOJ 671 纯洁的买卖:无限背包
题目链接:https://www.rqnoj.cn/problem/671 题意: ALEJ要通过倒卖东西来赚钱. 现在他有m元经费. 有n种物品供他选择,每种物品数量无限. 第i件物品的买入价为c[ ...
- IDEA编译less插件LESS CSS Compiler的安装
1.IDEA插件地址:LESS CSS Compiler 百度云盘下载地址 2.安装Node.js,下载 3.打开idea→settings→plugins 安装:“nodejs”插件,并按以下步骤进 ...
- listen 78
Struggling Young Readers Like Kindles Kindles, Nooks and other e-readers catch flack for threatening ...
- ECMAScript Obejct 属性操作API
Object 创建对象 我们有很多种方法创建一个对象,Object.create, Object.assign Object.create //字面量 var o = {}; // 等同于 var o ...
- nginx使用ssl模块配置HTTPS支持 <转>
默认情况下ssl模块并未被安装,如果要使用该模块则需要在编译时指定–with-http_ssl_module参数,安装模块依赖于OpenSSL库和一些引用文件,通常这些文件并不在同一个软件包中.通常这 ...
- 1053 Path of Equal Weight (30)(30 分)
Given a non-empty tree with root R, and with weight W~i~ assigned to each tree node T~i~. The weight ...
- ogg概叙、架构、进程
一. OGG 概述 OGG 全称Oracle Golden Gate. 历史: Golden Gate公司于1995年成立于美国加州旧金山,它的名称源自旧金山闻名于世的金门大桥.两位创始人Eric F ...
- BZOJ3219:巡游
浅谈树分治:https://www.cnblogs.com/AKMer/p/10014803.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem. ...