文档章节

解决jquery的scrollTop()置顶的浏览器兼容

飞吧_回家
 飞吧_回家
发布于 2016/06/15 15:54
字数 393
阅读 105
收藏 0

对于前端开发者来说,浏览器兼容是经常会遇到的问题,在不同的项目中经常会遇到不同的弹出层操作,比如登录的弹出层,需要在屏幕的中间出现,同时还要隐藏垂直滚动条。此时就需要使用jquery脚本来进行控制,是的弹出层可以在最上面的屏幕中间显示。

输入图片说明 因此,需要使用jquery的scrollTop()函数使滚动条置顶然后隐藏滚动条,显示出弹出层即可。具体的实现代码如下:

$("body").scrollTop(0);
$("body").css("overflow","hidden");

经测试,只有这两句在ie内核和火狐内核的浏览器中是不能够正常的滚动置顶的。因此需要进行完善该代码,具体的兼容实现代码如下:

$("body").scrollTop(0);
$("body").css("overflow","hidden");
$("html").scrollTop(0);
$("html").css("overflow","hidden");
$(document).scrollTop(0);
$(document).css("overflow","hidden");

通过上面的四句补充代码,即可实现各个浏览器的兼容问题,有其他好的方法欢迎大神相互交流和留言沟通

© 著作权归作者所有

共有 人打赏支持
飞吧_回家
粉丝 3
博文 12
码字总数 6526
作品 0
杨浦
js:滚动页面时自动激活对应菜单中的条目

这个在Change Active Menu Item on Page Scroll?有详细的讨论。对应的代码在http://jsfiddle.net/mekwall/up4nu/。 下面是代码,我做了些小的改动。 效果如下: firebug控制台输出如下: jq...

樂天
2015/11/20
0
0
滚动到顶部-jquery.scrolltotop.js

使用教程: 直接粘贴下面的代码, 作为一个引入 配置参数: 初始化插件:

前端届的科比
2014/05/25
0
0
jQuery load 局部刷新

用法 jQuery ajax - load() 方法 运行环境 jQuery的方法跟一样都需要用到服务器端来支持,所以你会发现如果你只是写了静态页面并直接双击运行,浏览器会给你一个的错误,你需要把代码放在服务...

cobish
2015/11/07
0
0
angularJS之站在jQuery的肩膀上

jQuery:用更少的代码,实现更强悍的功能 托互联网日新月异发展的福,浏览器变成了人们接入互联网的入口,而JavaScript 这个曾经的小语种,终于成功地站到了舞台的中央,唤起了开发者的兴趣。...

笔阁
2015/03/16
0
0
从零玩转jQuery-初识jQuery

课前须知: 学习jQuery前必须先掌握JavaScript jQuery虽然属于前端技术, 但是对于后端人员(诸如Java、PHP等,也需要掌握) jQuery是什么? jQuery是一款优秀的JavaScript库,从命名可以看出jQu...

极客江南
04/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Shell编程(expect同步文件、指定host和同步文件、构建文件分发系统、批量执行命令)

expect脚本同步文件 需求:自动同步文件 实验准备: A机器:192.168.248.130 B机器:192.168.248.129 实现: 1.A机器编写4.expect脚本文件,内容如下所示: #!/usr/bin/expectset passwd "...

蛋黄_Yolks
25分钟前
2
0
ppwjs之bootstrap颜色:背景颜色

<!DOCTYPT html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>ppwjs欢迎您</title><link rel="icon" href="/favicon.ico" ......

ppwjs
26分钟前
1
0
Ubuntu与 Fedora之对比

大家好。今天我将重点介绍两个流行的Linux发行版之间的一些特性和差异; Ubuntu 18.04和Fedora 28。它们都有自己的包管理; Ubuntu使用DEB,而Fedora使用RPM,但它们都具有相同的桌面环境(GNO...

linuxprobe16
29分钟前
2
0
线性代数入门

线性代数的概念对于理解机器学习背后的原理非常重要,尤其是在深度学习领域中。它可以帮助我们更好地理解算法内部到底是怎么运行的,借此,我们就能够更好的做出决策。所以,如果你真的希望了...

牛奋Debug
昨天
3
0
开发5分钟,调试2小时 - 该如何debug?

几年来我在答疑群、论坛、公众号、知乎回答的各种问题,没有一万也有八千。其中有三分之二以上都是在帮人看报错,帮人 debug(调试代码)。 可以说,会不会 debug,有没有 debug 的意识,懂不...

crossin
昨天
4
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部