最近在做博客的目录功能，发现一个在现代浏览器间的一个bug，或是称之为差异，即页面滚动值(scrollTop)的获取与设定。
在此之前先说一下关于页面元素的坐标获取，这张图的经典性不必再提。
实现滚动到某位置功能
一个最主要的功能就是实现点击标题页面滚动，因为我们要滚动到页面某个标题，所以需要计算出滚动这个元素的具体绝对位置，而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量，此处不适用。
此处应使用浏览器原生提供的 getBoundingClientRect 接口，此函数返回的是元素距离浏览器各边距的绝对位置，跟是什么定位类型的无关，非常适合制作页面滚动效果。
获取滚动需要的数据， body 的 scrollTop 即页面已经被滚动所隐藏的高度，再根据上面提到的接口获取元素距离浏览器顶部的距离，可以算出需要的滚动的高度，关系图如下：
遂，页面要滚动到的位置就是：
复制代码 代码如下:document.body.scrollTop+element.getBoundingClientRect().top;
这里顺带说下getBoundingClientRect().top 获取的元素在被滚动隐藏与非滚动时的区别：
如上图可以看出，即使要滚动到的元素部分在浏览器边界外，获取到的top即为负数，遂计算出来的页面高度依然是正确的。
点击目录跳转的功能就做完了，至今为止都很完美。
FireFox与Chrome的scrollTop的兼容问题
直到我今天在FireFox测试时发现，火狐下页面滚动的跳转功能无法使用。
1、原生接口测试
这里先提一下：
document.documentElement 即 <html> 元素，而 document.body 即 <body> 元素。
测试结果，在火狐上只能通过html元素来获取和设定页面滚动高度，而在谷歌上反之只能用body元素来获取和设定。
2、jquery接口测试
上面是使用原生的scrollTop属性来获取与设定，而jquery自己也实现了对scrollTop属性的封装，可以试试他的兼容性。
发现采用 $(document) 可以实现对获取和设定scrollTop的兼容，大喜。
3、scrollTop动画实现测试
虽然实现了兼容，但为了有更好的效果，我希望采用动画的方式滚动到页面的某位置，而不是直接跳转，这里采用jquery的 animate 函数来实现。
发现虽然可以采用$(document)来实现获取和设定，但动画效果都无法使用，还是只能用body元素和html元素来实现。
最终解决方案
遂最完美的实现方案是：
获取或直接设定当前页面滚动高度：
复制代码 代码如下:$(document).scrollTop();//获取，兼容火狐谷歌
有动画效果的设定当前页面高度：
复制代码 代码如下:$("body,html").animate({ scrollTop: ... });//动画滚动效果，兼容火狐谷歌
以上就是解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法，希望对大家的学习有所帮助。
js,scrollTop,兼容
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
更新日志
- 凤飞飞《浮世情怀》HQCD[正版原抓WAV+CUE]
- 群星《奔赴！万人现场 第3期》[FLAC/分轨][537.75MB]
- 群星 《2024好听新歌23》十倍音质 U盘音乐 [WAV分轨][1.6G]
- 群星《妙音纪念珍藏版》蓝光BSCD[WAV+CUE][1G]
- 【发烧试音】蔡克信严讯人间天籁》[原抓WAV+CUE]
- [ABC唱片]山姆泰勒《西电之声·萨克斯风》[低速原抓WAV+CUE]
- 童丽《微风细雨XRCD2》[原抓WAV+CUE]
- 群星 《车乐坊1》DTS魔音[WAV+CUE][1.7G]
- 邓丽君.2024 -《生誕70年ベスト?アルバム 沒後30年》环球日版 [WAV+分轨][993M]
- 群星《一人一首成名曲》1998 台湾金碟珍藏版[WAV+CUE][1.1G]
- 陈百强2024-《凝望》头版限量编号MQA-UHQCD[WAV+CUE]
- 测试示范《监听天碟3》头版限量编号LECD[WAV+CUE]
- 陈瑞《爱你到天荒地老HQ》头版限量[低速原抓WAV+CUE]
- 徐小凤 《徐小凤殿堂18首》24K金碟[WAV+CUE]
- 保时捷原厂车载爆棚动态试音碟《Panamera_Soundtrack》DTS[WAV分轨][1G]