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代码又复制了一边 以便你们使用
随机推荐
- SparseArray代替HashMap
相信大家都明白,手机软件的开发不同于PC软件的开发,因为手机性能相对有限,内存也有限,所谓“寸土寸金”,可能稍有不慎,就会导致性能的明显降低.Android为了方便开发者,特意在android.uti ...
- 小程序填坑之路(二):cover-view
https://blog.csdn.net/mr_chen95/article/details/79261987 在一些情况下,我们需要对map.video.canvas.camera这些微信小程序的 ...
- Jmeter入门(一)————线程组配置
线程组相当于有多个用户,同时去执行相同的一批次任务.每个线程之间都是隔离的,互不影响的.一个线程的执行过程中,操作的变量,不会影响其他线程的变量值. Delay Thread creation unt ...
- December 13th 2016 Week 51st Tuesday
Life is a sail trip full of chances and challenges. 人生的旅途中充满了机遇和挑战. A boat sails on the sea, the vas ...
- [原]Ubuntu 下安装apache+PHP
1.安装apache2 sudo apt-get install apache2 运行如下命令重启:sudo /etc/init.d/apache2 restart 在浏览器里输入http://loc ...
- 学习python第一天总纲
1).python基础语法:4周课程(结束阶段考试) 2).前端知识点:html.css.javascript(js).jQuery 3).Linux(系统).数据库(关系型&非关系型) 4) ...
- What Shape Layers Are-CAShapeLayer
矢量图.gpu直接使用.占用内存小 What Shape Layers Are Shape layers are layers capable of defining shapes as vector ...
- [CTSC2018]假面
题目 先来考虑一下第一问,血量有\(P\)的概率减\(1\) 由于我们最后需要求每一个人的期望血量,于是考虑维护出每个人处于不同血量时候的概率 一个简单\(dp\)即可 \[dp_{i,j}=dp_{ ...
- programming-languages学习
programming-languages学习 */--> pre.src {background-color: #292b2e; color: #b2b2b2;} pre.src {backg ...
- jfinal form表单提交文件
前台代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8&q ...