欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

chrome浏览器页面获取绑定返回顶部动画事件插件

程序员文章站 2022-03-11 08:37:39
在chrome浏览器下页面加载: var top = $("body").scrollTop() ; console.log(top) // 事件监听无效 var top = $("html").scrollTop(); console.log(top) // 事件监听无效 var top = $( ......

在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;
                    }; 
              });
         }

虽然插件功能实现,但作为新手的我还是留下疑问,标红字体的问题欢迎大家交流,谢谢!