文档章节

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

飞吧_回家
 飞吧_回家
发布于 2016/06/15 15:54
字数 393
阅读 118
收藏 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 3.0 —— 下一代的 jQuery

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

oschina
2014/10/30
14K
25
滚动到顶部-jquery.scrolltotop.js

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

前端届的科比
2014/05/25
0
0
程序员都会的 35 个 jQuery 小技巧

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

oschina
2015/11/06
12K
26
jQuery load 局部刷新

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

cobish
2015/11/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

NPM install -save 和 -save-dev 傻傻分不清

本文原文地址:https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html 回顾 npm install 命令 最近在写Node程序的时候,突然对 npm install 的-save和-save-dev 这两个参数的使用...

翔飘飘
5分钟前
0
0
spring-boot:run启动时,指定spring.profiles.active

Maven启动指定Profile通过-P,如mvn spring-boot:run -Ptest,但这是Maven的Profile。 如果要指定spring-boot的spring.profiles.active,则必须使用mvn spring-boot:run -Drun.profiles=test......

颖辉小居
5分钟前
0
0
抛弃console.log(),拥抱浏览器Debugger

译者按: 切换成本真的不高,建议使用开发者工具来Debug! 原文:How to stop using console.log() and start using your browser’s debugger 译者: Fundebug 为了保证可读性,本文采用意译...

Fundebug
9分钟前
0
0
Flask框架web开发:零基础入门

Flask框架是Python开发的一个基于Werkzeug和Jinja 2的web开发微框架,它的优势就是极其简洁,但又非常灵活,而且容易学习和应用。因此Flask框架是Python新手快速开始web开发最好的选择,此外...

笔阁
23分钟前
5
0
VMware前路难测,多个厂家群雄逐鹿

在人们高谈Salesforce、亚马逊等新兴云计算厂商取得的成就时,以VMware、HPE和Cisco为代表的老牌厂商也在进行着自己的转型和变化,而且还取得一定的进展。以VMware为例,虚拟机巨头公布了第二...

linuxCool
26分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部