頁面中的‘返回頂部’（位置固定，指定位置顯示/隱藏） Lebal:博客園美化

在頁面中經常需要使用到返回頂部按鈕，如果頁面內容過多過長，手動滑動滾動條比較麻煩，所以一般會出現返回頂部按鈕，一鍵回到頂部。本文實現的返回頂部的效果，將按鈕在滾動條指定高度出現，並固定的頁面指定位置。顯示爲一張圖片，鼠標放上顯示的是返回頂部文字提示。實現過程如下：

在html文件中：

<div id="return-top" class="top_e">
  <img src="/static/img/totop.png" width="60" id="img" >
    <div style="width:60px;margin:auto;">
        <p id='font' style="font-size:20px;margin-left:10px;display:none;">返回<br>頂部</p>
    </div>
</div>

這裏外面的div作爲返回頂部的外層。

內部有兩部分：

第一部分是一張圖片，從阿里矢量圖片庫中下載好的矢量圖片，如圖：

 

當然也可以根據自己的需要，選擇其他樣式和顏色。

第二部分是’返回頂部‘四個字，這裏需要換行，所以加了標籤。

css樣式代碼

.top_e{
    position:fixed;right:10px;bottom:40px;
    background:rgba(204,200,255,0.6);
    border-radius:15px;
    cursor:pointer;
    display:none;
    width:60px;
    height:60px;
}
.top_e:hover{
    color:white;
    background:#1296DB;
}

上面代碼實現了對返回頂部按鈕樣式的控制，其中position是固定按鈕的位置。
當然你也可以根據自己的需要進行調整。

JS代碼：控制按鈕的顯示和消失，也實現了圖片和文件的動態轉換。

// 控制按鈕的顯示和消失
 $(window).scroll(function(){
            if($(window).scrollTop()>300){
                $('#return-top').fadeIn(300);
                }
             else{$('#return-top').fadeOut(200);}
                 })


// 點擊按鈕，使得頁面返回頂部
$("#return-top").click(function(){
scrollTo(0,0);
});
// 鼠標懸浮按鈕之上，圖片消失，文字顯示
$(".top_e").mouseover(function(){
    $("#img").hide();
    $("#font").show();
})
//鼠標離開，文字消失，圖片顯示。
$(".top_e").mouseout(function(){
    $("#font").hide();
    $("#img").show();
})

JS實現滾動條滾到頁面距離底部300PX時執行事件的方法

scrollTop爲滾動條在Y軸上的滾動距離。
clientHeight爲內容可視區域的高度。
scrollHeight爲內容可視區域的高度加上溢出（滾動）的距離

$(window).scroll(function(){
　　var scrollTop = $(this).scrollTop();
　　var scrollHeight = $(document).height();
　　var windowHeight = $(this).height();
　　if(scrollHeight-scrollTop-windowHeight <=300){
//當滾動條滾動到距離底部還有300px的時候加載類容
　　}else{
//當滾動條滾動到距離底部大於300px的時候加載類容
}
});

效果演示

顯示返回頂部按鈕

鼠標懸浮於上，顯示文字提示

看到本文右側的點贊和踩了嗎，當他滾動到頁面底部的時候會自動隱藏，可以試一試

 

 

參考鏈接：

https://www.jianshu.com/p/22e184a74358

https://www.cnblogs.com/yubuzsidy/p/5192112.html