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代码又复制了一边 以便你们使用
随机推荐
- Anjular中的路由配置以及服务等模块的一些基本操作
1.路由的配置: 在Angular.js中,我们可以根据自己的需求来配置路由,以达到当url中的地址改变时,会跳转不同的页面 <script> //一开始的url:"http:/ ...
- Docker Toolbox更换镜像源并下载centos7
- cache2go开源项目的回调方法使用
https://github.com/muesli/cache2go 结构体 type CacheTable struct { sync.RWMutex . name string items map ...
- LDF文件丢失, 如何仅用MDF文件恢复数据库呢?
笔者的一个大小为2 TB的SQL Server的database的LDF文件在玩存储盘映射的过程中莫名其妙的丢失了. 好在MDF文件还在. 笔者慌了, Bruce Ye告诉笔者, 不用着急, 光用MD ...
- POP动画[3]
POP动画[3] 这一节主要讲解POP动画的自定义动画属性. POP动画中有一个参数,叫timingFunction,与CoreAnimation中的一个参数CAMediaTimingFunction ...
- 2 Docker 镜像基础
Docker 镜像可以从docker.io 下载,也可以自己通过Dockerfile来构建镜像,我有时从国外下载镜像时,网速不行,我就改成国内的镜像,修改如下: # vim /etc/docker/d ...
- apt安装mysql
使用 APT 安装 MySQL 参考官方文档 apt-get install mysql-server 这将安装MySQL服务器的包,以及客户端和数据库公共文件的包. 在安装过程中,系统会要求您为ro ...
- 2、Node.js 第一个应用
内容:三种变量申明方式,Node.js应用组成,第一个应用创建+代码 ################################################################# ...
- 【[SDOI2013]泉】
\(hash\)+容斥 但是看到这个令人愉快的数据范围还是直接枚举子集吧 首先我们发现\(6\)这个东西简直是小的可怜,复杂度里肯定有\(2^6\)的 于是我们可以直接先枚举子集,把所有状态的对应相等 ...
- 【LeetCode每天一题】Remove Duplicates from Sorted Array II(移除有序数组中重复的两次以上的数字)
Given a sorted array nums, remove the duplicates in-place such that duplicates appeared at most twic ...