-
背景
就是我那个自制博客的项目,在封面有个按钮,
按下按钮就直接向下滚到内容的页面。 -
情况
该按钮是用 click 后,使用 animate 设置scrollTop的距离,
来实现自动滚到目标位置的。最开始使用了这行代码:
$("html").animate({"scrollTop": 100}, 1000)
-
出现问题
其实一开始没发现有问题,但是后来我到 Edge浏览器上运行了一下,
发现,该按钮按下之后,丝毫没有反映,后台也没有报错,
然后我把代码中的html
换成了body
后,Edge 实现了功能,
但回到 Chrome 中,又出现了同样的问题,没反应。 -
解决办法
其实期间还经过各种折腾,但不得其解。
最后我只能把代码写成这样:
$("html, body").animate({"scrollTop": 100}, 1000)
点击时,同时把 html 和 body 都选择上,最终解决问题。
-
小探究
一开始以为是 animate 的问题,但是试验后排除了。
然后我就用了各个浏览器试了一遍(都是用的最新版17年10月)
得出以下结果:
fireFox、Chrome、IE9+均支持$("html").animate({"scrollTop": 100}, 1000)
而只有 Edge 需要改成 body 。
在网上我还看到有人写的文章中指出,
fireFox 和 Chrome 支持的有冲突,在我这并没有这种情况。
好吧就说到这,一个小问题。
但是我还是很好奇这是为什么,
大概是Edge浏览器的规则有点差异?
网友评论