解决FireFox和Chrome浏览器之间js页面滚动效果scrollTop兼容性问题的方法

最近在博客的目录功能中，我发现了一个现代浏览器之间的bug，或者说是一个区别，那就是页面scrollTop的获取和设置。

在此之前，先说一下页面元素的坐标获取。没有必要提及这幅画的古典。

实现滚动到某个位置的功能。

最重要的功能之一是通过点击标题页面进行滚动。因为我们想滚动到页面上的一个标题，我们需要计算滚动这个元素的具体绝对位置。常用的offsetTop是获取决定其定位的最近元素的偏移量，这里不适用。

在这里，您应该使用浏览器本身提供的getBoundingClientRect。这个函数从浏览器的每个边距返回元素的绝对位置，不考虑定位类型，非常适合制作页面滚动效果。

获取滚动所需的数据。正文的顶部是通过滚动隐藏的页面高度。然后根据上面提到的界面，得到元素与浏览器顶部的距离，就可以计算出需要的滚动高度。关系图如下：

因此，滚动到的位置是：

复制代码如下： document . body . scroll topelement . getboundingclientcorrect()。顶部；

顺便说一下，这里是getboundingclientect()获得的元素之间的区别。当它们被滚动隐藏时和当它们不被滚动时：

从上图可以看出，即使要滚动的元素在浏览器边界之外，得到的顶部也是负的，计算出的页面高度仍然是正确的。

点击目录跳转功能就完成了，目前为止都是完美的。

FireFox和Chrome的scrollTop之间的兼容性问题。

直到今天在Firefox中测试，发现FireFox下的页面滚动跳转功能无法使用。

1.本地接口测试。

这里先提一下：

document.documentElement是一个html元素，document.body是一个body元素。

从测试结果来看，在Firefox上，页面滚动高度只能通过html元素获取和设置，而在Google上则相反，只能通过body元素获取和设置。

2.jquery接口测试。

上面是用原生的scrollTop属性来获取和设置，而jquery本身已经实现了scrollTop属性的封装，所以可以试试它的兼容性。

发现$(文档)与获取和设置scrollTop兼容。

3.scrollTop动画实现测试。

虽然做到了兼容，但是为了达到更好的效果，希望通过动画的方式滚动到页面上的某个位置，而不是直接跳转。这里，我使用jquery的动画功能来实现这一点。

发现虽然可以使用$(document)来获取和设置，但不能使用动画效果，只能使用body元素和html元素。

最终解决方案。

因此，最完美的实施方案是：

或者直接设置当前页面滚动高度：

副本代码为：$(文档)。scroll top()；//get，兼容火狐谷歌。

使用动画效果设置当前页面高度：

复制代码如下： $ ('body，html ')。动画({scrolltop3360.});//动画滚动效果，兼容火狐谷歌。

以上就是FireFox和Chrome浏览器之间js页面scrollTop效果兼容性问题的解决方案，希望对大家的学习有所帮助。