scrollTop在FireFox与Chrome浏览器间的兼容问题

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: ... });//动画滚动效果，兼容火狐谷歌

http://www.tuicool.com/articles/UZNv2u

scrollTop在FireFox与Chrome浏览器间的兼容问题相关推荐

scrolltop 原生js_解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法...
最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实现滚动 ...
[转]IE、FireFox、Chrome浏览器中关于URL传参中文乱码，解决兼容性问题！
原文地址:https://cloud.tencent.com/developer/article/1334736 前台用url传值中文,后台用request.getParameter接收参数.在Fir ...
怎样下载Firefox与Chrome浏览器驱动
在浏览器地址栏输入https://www.seleniumhq.org/ 打开Selenium官网下载Firefox浏览器驱动解压到本地下载Chrome浏览器驱动解压到本地把这2个驱动放到P ...
Linux下Firefox和chrome浏览器flash插件的安装
一对于firefox浏览器将下载的flash压缩包(如install_flash_player_11_linux.x86_64.tar.gz)解压后,将usr目录和libflashplayer.so ...
firefox/safari/chrome浏览器模拟iPad的userAgent的方法
在给 iPad 做的网页进行测试的时候,有时候需要在 PC 上模拟 iPad User Agent 去访问网页,今天就介绍下如何让 Firefox,Chrome,Safari 浏览器模拟 iPad U ...
Linux centos安装Firefox、Chrome浏览器
1.安装Firefox浏览器 centos7有自带的Firefox浏览器,不过版本一般比较旧,有很多兼容性问题,需要先卸载掉 yum remove firefox 安装新版本的Firefox: yum ...
Firefox与Chrome浏览器导入burpsuite证书
目录一. Chrome浏览器导入证书安装代理插件二. Firefox导入证书安装代理插件当我们挂了burp代理但是没有导入证书的话,我们抓取https网站流量的包会显示不安全,如下这样一. ...
Firefox 使用 Chrome 浏览器的 PDF 和 Flash 插件
Mozilla今天宣布代号Mortar的项目,即探索在火狐浏览器当中使用替代技术,以削减成本.该项目目前两个目标是在火狐浏览器代码库中测试两个Chrome浏览器插件,其中一个是PDFium,用于查看P ...
selenium 模块 webdriver使用：Mac下 Firefox和Chrome浏览器驱动下载安装
Python:selenium 模块 webdriver使用报错:No such file or directory: 'geckodriver': 'geckodriver' 1.例子:获取网页句柄 ...