问题

我在个人站点的左下角和右下角各自使用了如下代码来将页面滚动到顶部和底部:

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

参考链接

随机推荐

  1. HDU2243 考研路茫茫——单词情结 ——AC自动机、矩阵优化

    题目链接:https://vjudge.net/problem/HDU-2243 考研路茫茫——单词情结 Time Limit: 2000/1000 MS (Java/Others)    Memor ...

  2. nodejs && apidoc

    1. 安装nodejs      http://www.nodejs.org      源码编译      configure —prefix=/usr/local/nodejs      make ...

  3. 递归/非递归----python深度遍历二叉树(前序遍历,中序遍历,后序遍历)

    递归代码:递归实现很简单 '二叉树结点类' class TreeNode: def __init__(self, x): self.val = x self.left = None self.righ ...

  4. bzoj 3267: KC采花&&3272&&3638&&3502 线段树

    题目大意 给定一个长为n的序列,维护两种操作: 1.单点修改 2.在[l,r]这段区间中取k个互不相交的子段,使子段之和最大. \(n \leq 50000,k \leq 20\) 题解 四倍经验.( ...

  5. 洛谷 P2962 [USACO09NOV]灯Lights

    题目描述 Bessie and the cows were playing games in the barn, but the power was reset and the lights were ...

  6. [转]script之defer&async

    html5中script的async属性 我兴奋于html5的原因之一是一些久久未能实现的特性现在可以真正运用于实际项目中了. 如我们使用placeholder效果蛮久了但是那需要javascript ...

  7. 记一次keepalived脑裂问题查找

    在自己环境做keepalived+Redis实验时,当重启了备用redies机器后,发现两台redies主机都拿到了VIP [root@redis2 ~]# ip addr list 1: lo: & ...

  8. Jasper-Api:接口测试

    ylbtech-Jasper-Api:接口测试 1. EditTerminal返回顶部 1. /// <remarks/> [System.Web.Services.Protocols.S ...

  9. 【252】◀▶IEW-Unit17

    Unit 17 Social Issues: Population 复杂表格写作技巧 1.Model1对应图片分析 The table contains information about the d ...

  10. git for eclipse 如何取消误操作的忽略(ignore)操作

    直接删除ignore文件即可.如下显示: 原文引用:https://blog.csdn.net/exceptionss/article/details/79082601