chrome浏览器页面获取绑定返回顶部动画事件插件
在chrome浏览器下页面加载:
var top = $("body").scrollTop() ;
console.log(top) // 事件监听无效
var top = $("html").scrollTop();
console.log(top) // 事件监听无效
var top = $(document).scrollTop();
console.log(top) // 事件监听无效
在浏览器窗口滚动事件监听下
$(window).scroll(function(){
var top = $("body").scrollTop() ;
console.log(top) ; // 事件监听到滚动次数,没有值,默认0;
var top = $("html").scrollTop();
console.log(top) ; // OK,值从1开始
var top = $(document).scrollTop();
console.log(top) ; // OK,值从1开始
}
ui-backTop返回顶部插件
ui.scss
.ui-backTop{
display:none;
position:fixed;
right:2%;
bottom:10px;
z-index:9;
width:35px;
height:35px;
border-radius:50%;
background:url(../img/icon-go-up.png) center no-repeat rgba(142,223,243,0.8);
&:hover{
background:rgba(142,223,243,0.4);
color:#00b3ea;
// font-weight:600;
}
&:hover:after{
content:"顶";
display:block;
line-height:35px;
text-align:center;
font-size:20px;
}
}
ui.js
$.fn.UiBackTop = function(){
var ui = $(this);
var el = $("<a href='#' class='ui-backTop'></a>");
var windowHeight = $(window).height();
ui.append(el);
$(window).scroll(function(){
var top = $("html").scrollTop();
if(top > windowHeight||top>100){
el.show();
}else{
el.hide();
}
});
el.click(function(){
if ($("html").scrollTop()) {
$("html").animate({ scrollTop: 0 }, 1000); //在点击事件函数内 console.log($("html").scrollTop()) 有值?
return false;
};
});
}
虽然插件功能实现,但作为新手的我还是留下疑问,标红字体的问题欢迎大家交流,谢谢!
chrome浏览器页面获取绑定返回顶部动画事件插件的更多相关文章
- jquery返回顶部和底部插件和解决ie6下fixed插件
(function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...
- zepto返回顶部动画
点击返回顶部 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; v ...
- Chrome浏览器扩展 获取用户密码
Chrome 浏览器允许安装第三方扩展程序以扩展浏览器并给浏览器加入新的功能,扩展使用 JavaScript 以及 HTMl 编写并允许互相访问和控制 DOM. 因为允许访问 DOM,攻击者就可以读取 ...
- Chrome浏览器扩展开发系列之十一:NPAPI插件的使用
在Chrome浏览器扩展中使用HTML和JavaScript非常容易,但是如何重用已有的非JavaScript遗留系统代码呢?答案是将NPAPI插件绑定到Chrome浏览器扩展,从而实现在Chrome ...
- 将Chrome浏览器中的扩展程序导出为crx插件文件
将Chrome浏览器中安装的插件程序导出为crx插件文件 以360急速浏览器为例进行导出crx插件程序 1.在Chrom商店中找到需要的插件,安装到浏览器的扩展程序里面()IDM Integratio ...
- 通过私有协议Chrome浏览器页面打开本地程序
近期方有这样的要求:这两个系统,根据一组Chrome开展,根据一组IE开展,需要Chrome添加一个链接,然后进入IE该系统的开发.这,需要Chrome跳转到创建一个链接IE浏览器指定的页面.同时也实 ...
- 解决centos chrome浏览器页面中文显示为方框
1.系统:centos 7 下载宋体文件:点击下载 把文件放到 /usr/share/fonts/simsun.ttc 依次执行如下命令 mkfontdirmkfontscalefc-cache -f ...
- jquery back to top 页面底部的返回顶部按钮
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 点击 返回顶部 动画
附上效果图 触发前 触发后 HTML代码: CSS代码 JS代码 由于复制文本太丑了 所以直接放的图片 但是我在评论区把js代码又复制了一边 以便你们使用
随机推荐
- Oracle Merge Into的用法详解
1. MERGE INTO 的用途 MERGE INTO 是Oracle 9i以后才出现的新的功能.那这个功能 是什么呢? 简单来说,就是:“有则更新,无则插入” ...
- C++ 重载 重写 重定义
重写:存在于类的继承,修饰符是virtual,函数的参数个数,顺序,类型,均相同. 重载:函数的参数列表,类型,顺序不相同. 重定义:对父类的函数进行屏蔽,参数列表可以不相同,没有virtual修饰
- 企业级Apache详解2
http_conf主配置说明 root@lamp01 apache]# grep -Ev "#|^$" conf/httpd.conf DocumentRoot "/us ...
- python接口测试:自动保存cookies
接口测试中遇到上一个请求返回响应包含cookie(如下图登录请求的响应结果).需将cookies保存下来,后续请求自动带入,否则会提示未登录. python requests的cookie类型是< ...
- the longest distance of a binary tree
版权声明:欢迎查看本博客.希望对你有有所帮助 https://blog.csdn.net/cqs_2012/article/details/24880735 the longest distance ...
- matlab中的unique函数详解
https://blog.csdn.net/sinat_40282753/article/details/78373532
- 随手练——HDU Safe Or Unsafe (小根堆解决哈夫曼问题)
HDU 2527 :http://acm.hdu.edu.cn/showproblem.php?pid=2527 哈夫曼树,学完就忘得差不多了,题目的意思都没看懂,有时间复习下,看了别人的才知道是怎么 ...
- 解决windows7无法连接CentOS7系统中oracle问题:ORA-12514 TNS 监听程序当前无法识别
linux开启后终端按下面输入(容易忘记,记录下): [oracle@localhost ~]$ lsnrctl stop #先关闭监听服务 [oracle@localh ...
- # 20155214 2016-2017-2 《Java程序设计》第9周学习总结
20155214 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 JDBC架构 JDBC全名Java DataBase Connectivity,是用于执行S ...
- pyenv 配置python虚拟环境
安装pyenv环境 yum -y install git yum install gcc make patch gdbm-devel openssl-devel sqlite-devel readli ...