解决了JS页面滚动效果scrollTop的Firefox和Chrome浏览器之间的兼容性

最近，我在做博客目录功能。我发现在现代浏览器的bug，或者叫差异，即获取和设置scrollTop。

在这之前，让我们来讨论页面元素的坐标获取，这张图片的经典不可再提及。
实现滚动到某一位置的功能

的一个主要功能是点击标题页面滚动，因为我们必须滚动标题页，所以需要计算绝对滚动元件的具体位置，和offsettop通常用于获取当前元素的偏移量和元素的定位最近的决定，这是不适用。

由浏览器getboundingclientrect接口是用在这里。这个函数从浏览器的边缘返回元素的绝对位置，与位置类型无关。它非常适合制作页面滚动效果。

获得所需的数据滚动，身体scrollTop是页面已经被滚动的高度。然后，基于上述接口，我们可以从浏览器顶部获取元素之间的距离并计算所需的滚动高度。
复制代码如下：文档。身体。scrollTop + element.getboundingclientrect（顶部）；
这是通过getboundingclientrect元素之间的差异（）。上滚动的隐藏和非滚动。
从上面的图表中可以看到，即使我们想滚动到浏览器边界之外的元素部分，我们得到的顶部也是负数，所以计算出的页面高度仍然正确。

点击目录跳转的功能已经完成，到目前为止还很完善。

Firefox和Chrome的scrollTop的相容性

直到今天我找到了Firefox测试，在Firefox下滚动的Web页面的跳过功能无法使用。

1。主要的接口测试

这是第一次提到。
document.documentelement是元素，而document.body是元素。

测试结果，在Firefox中只能通过HTML元素来获取和设置页面滚动高度，而恰恰相反，谷歌只能获得和设置与体元素。

2，jQuery接口测试

以上是使用本地scrollTop属性的获取和设置，以及jQuery本身也实现了scrollTop属性的封装，可以试试他的兼容性。

发现使用美元（文件）可以实现获取、欢欢喜喜的兼容性设置scrollTop。

3、scrollTop动画实现测试

虽然实现了兼容性，但为了取得更好的效果，我想通过动画来滚动页面的某个位置，而不是直接跳转到页面。这里我们使用jQuery的动画函数来实现。

结果发现，虽然$（文档）可以用来实现访问和设置，但动画是不可用的，只能用体元素和HTML元素实现。

最终的解决方案

最完美的实现是：

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

复制代码如下：$（document）（。scrollTop）；/ /让Firefox、谷歌兼容
动画效果设置当前页面高度：

复制代码如下：$（体、HTML。动画（scrollTop：）{…}）； / /动画滚动效果，兼容Firefox、谷歌

以上是在解决问题的方法在Firefox和Chrome浏览器兼容性scrollTop JS页面滚动效果，希望对大家的学习有所帮助。