1. 程式人生 > >JQ 移動端返回頂部,往下滑動時顯示返回按鈕,往上滑動時隱藏返回按鈕

JQ 移動端返回頂部,往下滑動時顯示返回按鈕,往上滑動時隱藏返回按鈕

hid 獲取 scroll var 返回 向上 區域 手勢 默認

returnTop:function(){
        //預定義返回頂部的html代碼,它的css樣式默認為不顯示 
        var gotoTop_html = ‘<div class="returnTop"></div>‘; 
        //將返回頂部的html代碼插入頁面上id為page的元素的末尾 
        
        $(".ding_C_returnTop").append(gotoTop_html); 
            var windowTop=0;//初始話可視區域距離頁面頂端的距離
        $(document).scroll(function
() { var scrolls = $(this).scrollTop();//獲取當前可視區域距離頁面頂端的距離 if(scrolls>=windowTop){//當B>A時,表示頁面在向上滑動 //需要執行的操作 windowTop=scrolls; $(".ding_C_returnTop").hide(); console.log("上") }else{//當B<a 表示手勢往下滑動 //
需要執行的操作 console.log("下") windowTop=scrolls; $(".ding_C_returnTop").show(); } }); $(".ding_C_returnTop").show(); $(".ding_C_returnTop").click(//定義返回頂部點擊向上滾動的動畫 function(){$(‘html,body‘).animate({scrollTop:0},700); }); },

JQ 移動端返回頂部,往下滑動時顯示返回按鈕,往上滑動時隱藏返回按鈕