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

Posted 2021-01-13 zmc66

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

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