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代码又复制了一边 以便你们使用
随机推荐
- (Stanford CS224d) Deep Learning and NLP课程笔记(三):GloVe与模型的评估
本节课继续讲授word2vec模型的算法细节,并介绍了一种新的基于共现矩阵的词向量模型--GloVe模型.最后,本节课重点介绍了word2vec模型评估的两种方式. Skip-gram模型 上节课,我 ...
- 使用Netty3或Netty4发布Http协议服务
现在是2018年1月11日18:12分,已经是下班时间了,小Alan今天给大家简单的介绍一下Netty,让大家以后在使用到Netty的时候能够有一定的了解和基础,这样深入学习Netty以及以后灵活应用 ...
- linux day4
echo $? :上一次命令是否执行正确make clean :清理编译垃圾文件env :查询环境变量 安装pip下载软件源cat /etc/pip.conf [global] index-url = ...
- spring+quarts常见问题
javax/transaction/UserTransactionCaused by: java.lang.NoClassDefFoundError: javax/transaction/UserTr ...
- spider-抓取网页内容
使用urllib2抓取网页内容: import urllib2 from HTMLParser import HTMLParser request = urllib2.Request('http:// ...
- JavaScript学习---JavaScript深入学习
对象的概念 对象分类[3种]: ECMScript(JS自己的对象), BOM(浏览器对象) DOM(文档对象,操作HTML的) 11种内置对象: Array ,String ...
- 计算机作业(HTML简单框架网页制作) 物联网 王罗红
- January 04 2017 Week 1st Wednesday
Nothing happens unless first a dream. 一切始于梦想. I have a dream, one day I can be the expert in this fi ...
- [BZOJ 4573][ZJOI 2016]大森林
[LOJ 2092][BZOJ 4573][UOJ 195][ZJOI 2016]大森林 题意 给定一个树序列, 初始时所有树都只有一个点, 要求支持三种操作: 区间种树(在某个特定点上长出一个子结点 ...
- Manjaro 更新vim插件或者系统后 YCM失效
manjaro 更新之后,ycm总会多少有些毛病: 第一次遇到的问题: PluginUpdate之后ycm失效.使用命令:YcmToggleLogs查看ycmd_39047_stderr_Pp1GpB ...