在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浏览器页面获取绑定返回顶部动画事件插件的更多相关文章

  1. jquery返回顶部和底部插件和解决ie6下fixed插件

    (function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...

  2. zepto返回顶部动画

    点击返回顶部 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; v ...

  3. Chrome浏览器扩展 获取用户密码

    Chrome 浏览器允许安装第三方扩展程序以扩展浏览器并给浏览器加入新的功能,扩展使用 JavaScript 以及 HTMl 编写并允许互相访问和控制 DOM. 因为允许访问 DOM,攻击者就可以读取 ...

  4. Chrome浏览器扩展开发系列之十一:NPAPI插件的使用

    在Chrome浏览器扩展中使用HTML和JavaScript非常容易,但是如何重用已有的非JavaScript遗留系统代码呢?答案是将NPAPI插件绑定到Chrome浏览器扩展,从而实现在Chrome ...

  5. 将Chrome浏览器中的扩展程序导出为crx插件文件

    将Chrome浏览器中安装的插件程序导出为crx插件文件 以360急速浏览器为例进行导出crx插件程序 1.在Chrom商店中找到需要的插件,安装到浏览器的扩展程序里面()IDM Integratio ...

  6. 通过私有协议Chrome浏览器页面打开本地程序

    近期方有这样的要求:这两个系统,根据一组Chrome开展,根据一组IE开展,需要Chrome添加一个链接,然后进入IE该系统的开发.这,需要Chrome跳转到创建一个链接IE浏览器指定的页面.同时也实 ...

  7. 解决centos chrome浏览器页面中文显示为方框

    1.系统:centos 7 下载宋体文件:点击下载 把文件放到 /usr/share/fonts/simsun.ttc 依次执行如下命令 mkfontdirmkfontscalefc-cache -f ...

  8. jquery back to top 页面底部的返回顶部按钮

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js 点击 返回顶部 动画

    附上效果图 触发前 触发后 HTML代码: CSS代码 JS代码 由于复制文本太丑了 所以直接放的图片  但是我在评论区把js代码又复制了一边 以便你们使用

随机推荐

  1. 四、angularjs 如何在页面没有登录的情况下阻止用户通过更改url进入页面--$stateChangeStart

    有时候用户没有登录或者在某些情况下你是不希望用户进入页面,但是angular的路由机制可以让用户直接通过更改Url进入页面,如何处理这一问题呢? ——监控路由转换机制 $stateChangeStar ...

  2. 服务器端的tomcat,servlet框架

    tomcat是一个服务器程序 可以对webapp目录下的Servlet代码进行执行和操作 编写的Servlet代码的步骤一般是在本地的ide中编写和测试,然后打包工程为war格式的文件,部署在服务器t ...

  3. No value specified for 'Date'错误

    今天使用 BeanUtils.copyProperties(m,n);  遇到  No value specified for 'Date'  这个错误,以前用的时候都不需要加 try 今天使用发现需 ...

  4. react入门参考资料

    ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出 ...

  5. 彻底澄清c/c++指针概念

    传统的指针概念教科书上已经写的很详细了,这里作为一些补充 在声明一个指针变量的时候 double  *ptr: 这是声明了一个ptr的指针变量,ptr本身是地址,它的数据类型是double  *,在变 ...

  6. Excel录入中实现单元格多选项自动下拉

    当我们在Excel表格中需要输入大量的重复数据时,往往利用数据的有效性来制作一个下拉菜单以提高重复数据的输入速度.但在实际的操作过程中,必须选中需要输入重复数据的单元格并单击该单元格右边的下拉箭头,才 ...

  7. linux下安装rar以及rar相关命令参数详解

    Linux平台默认是不支持RAR文件的解压,需要安装Linux版本的RAR压缩软件,下载地址:http://www.rarlab.com/download.htm 下载之后进行解压之后,进入rar目录 ...

  8. Python学习---深入编码学习1225

    1.1. Python2 Py2中只有2中数据类型,Str和Unicode,而且str中保存的是bytes,Unicode中保存的是unicode 一切我们能看到的明文都是unicode数据类型, b ...

  9. 沉淀,再出发:docker的原理浅析

    沉淀,再出发:docker的原理浅析 一.前言 在我们使用docker的时候,很多情况下我们对于一些概念的理解是停留在名称和用法的地步,如果更进一步理解了docker的本质,我们的技术一定会有质的进步 ...

  10. codeforces 808G Anthem of Berland

    codeforces 808G Anthem of Berland 题面 给定\(s\)串和\(t\)串,字符集是小写字母.\(s\)串中有些位置的值不确定,要求你确定这些位置上的值,使得\(t\)在 ...