文档章节

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

飞吧_回家
 飞吧_回家
发布于 2016/06/15 15:54
字数 393
阅读 123
收藏 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
107
0
[译] jQuery 3.0 终于发布了

原文链接 : jQuery 3.0 Final Released! 原文作者 : Timmy Willison 译文出自 : 掘金翻译计划 译者 : Dwight 校对者: buccoji, thanksdanny 从2014年10月开发到现在,jQuery 3.0终于发布了!...

donghuan1
05/07
0
0
滚动到顶部-jquery.scrolltotop.js

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

前端届的科比
2014/05/25
192
0
jQuery 3.0 —— 下一代的 jQuery

jQuery发布已经快八年了,挺让人难以置信。过去的这些年Web开发变了很多,jQuery也随之变化着。在这个过程中,团队一直在对确保过往代码的兼容支持和获取最好的Web开发实践的现实之间努力着。...

oschina
2014/10/30
14.2K
25
程序员都会的 35 个 jQuery 小技巧

收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 2. 隐藏搜索文本框文字 3. 在新窗口中打开链接 4. 检测浏览器 注: 在版本jQuery 1.4中,$.support 替换掉了$.brows...

oschina
2015/11/06
12.1K
26

没有更多内容

加载失败,请刷新页面

加载更多

一、docker 入坑(win10和Ubuntu 安装)

前言 终究还是绕不过去了,要学的知识真的是太多了,好在我们还有时间,docker 之前只闻其声,不曾真正的接触过,现在docker 越来越火,很多公司也都开始使用了。所以对于我们程序员而言,又...

quellanan2
22分钟前
4
0
AutoCompleteTextView

小技巧按菜单键 当菜单打开之前会调用onMenuOpened(int featereId,Menu menu),可以重写这个方法,弹出对话框或者Popmenu 再布局中添加控件AutoCompleteTextView. <AutoCompleteTextVie...

逆天游云
25分钟前
4
0
谷歌软件商店:推出5美元会员 可用数百个软件

腾讯科技讯,谷歌和苹果是全球两大智能手机操作系统的运营者,两家公司旗下分别拥有占据行业垄断地位的谷歌软件商店和苹果软件商店。据外媒最新消息,手机软件商店的商业模式正在发生一些变化...

linuxCool
47分钟前
3
0
RocketMQ 多副本前置篇:初探raft协议

Raft协议是分布式领域解决一致性的又一著名协议,主要包含Leader选举、日志复制两个部分。 温馨提示: 本文根据raft官方给出的raft动画进行学习,其动画展示地址:http://thesecretlivesofda...

中间件兴趣圈
47分钟前
3
0
elasticsearch 6.8.0 添加认证

1. 修改elasticsearch-6.8.0/config/elasticsearch.yml 最后添加一行:xpack.security.enabled: true 2. 初始化用户和密码 ./bin/elasticsearch-setup-passwords interactive 我这里初始化为......

coord
49分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部