chrome瀏覽器頁面獲取繫結返回頂部動畫事件外掛

趙小川發表於2018-10-20

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

雖然外掛功能實現,但作為新手的我還是留下疑問,標紅字型的問題歡迎大家交流,謝謝!

相關文章