整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
大家介紹如何通過 JS/CSS 實現網頁返回頂部效果。
CSS 按鈕樣式：
#myBtn {
display: none; /* 默認隱藏 */
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: red; /* 設置背景顏色，你可以設置自己想要的顏色或圖片 */
color: white; /* 文本顏色 */
cursor: pointer;
padding: 15px;
border-radius: 10px; /* 圓角 */
}
var topBtn = document.getElementById('top');
// 獲取視窗高度
var winHeight = document.documentElement.clientHeight;
window.onscroll = function () {
// 獲取頁面向上滾動距離，chrome瀏覽器識別document.body.scrollTop，而火狐識別document.documentElement.scrollTop，這里做了兼容處理
var toTop = document.documentElement.scrollTop || document.body.scrollTop;
// 如果滾動超過一屏，返回頂部按鈕出現，反之隱藏
if(toTop>=winHeight){
topBtn.style.display = 'block';
}else {
topBtn.style.display = 'none';
}
}
topBtn.onclick=function () {
var timer = setInterval(function () {
var toTop = document.documentElement.scrollTop || document.body.scrollTop;
// 判斷是否到達頂部，到達頂部停止滾動，沒到達頂部繼續滾動
if(toTop == 0){
clearInterval(timer);
}else {
// 設置滾動速度
var speed = Math.ceil(toTop/5);
// 頁面向上滾動
document.documentElement.scrollTop=document.body.scrollTop=toTop-speed;
}
},50);
}現回到頂部按鈕 Back To Top的效果圖
回到頂部按鈕，常用與PC站點中。
例如用戶查看完長篇文章，可以點擊按鈕快速回到頂部，繼續瀏覽其他的內容。
提供回到頂部按鈕的功能，是一種很好的用戶體驗。
<a href="#" class="back-to-top">︽</a>
優點是實現簡單非常直接，通過HTML就可實現，無需用到Javascript。
缺點是點擊就立即返回是回到頂部，比較單調，缺少動畫效果。
還有一個潛在缺點是回到頭部后，URL上的錨點會變成空，如果網站用到錨點功能，例如tab標簽，就會互相影響。
<button class="js-back-to-top back-to-top">︽</button>
主要的做法有兩步
當用戶滾動到離頂部100像素時，展示回到頂部按鈕
當用戶點擊按鈕時，通過動畫效果返回頭部
實現回到頂部按鈕 Back To Top的Javascript代碼
這種方法的優點是邏輯簡單，一目了然，回到頂部能夠自定義動畫效果，讓用戶感覺操作順暢。
要說缺點就是比第一種復雜點，需要Javascript配合。
最后附上第二種方法的HTML + CSS + Javascript源碼，大家可以復制后保存為html文件，雙擊打開即可體驗。
大家如果有更好的辦法，或者優化的地方，也可以和小編分享下！
<html>
<head>
<meta charset="utf-8">
<style>
.back-to-top {
display: none; /* 默認是隱藏的，這樣在第一屏才不顯示 */
position: fixed; /* 位置是固定的 */
bottom: 20px; /* 顯示在頁面底部 */
right: 30px; /* 顯示在頁面的右邊 */
z-index: 99; /* 確保不被其他功能覆蓋 */
border: 1px solid #5cb85c; /* 顯示邊框 */
outline: none; /* 不顯示外框 */
background-color: #fff; /* 設置背景背景顏色 */
color: #5cb85c; /* 設置文本顏色 */
cursor: pointer; /* 鼠標移到按鈕上顯示手型 */
padding: 10px 15px 15px 15px; /* 增加一些內邊距 */
border-radius: 10px; /* 增加圓角 */
}
.back-to-top:hover {
background-color: #5cb85c; /* 鼠標移上去時，反轉顏色 */
color: #fff;
}
</style>
</head>
<body>
<div style="background-color:#5cb85c;color:white;padding:20px">固定到底部</div>
<div style="background-color:#f6f6f6;padding:20px 20px 1000px">
該實例演示了如何創建一個“回到頂部”按鈕。請往下滾動，體驗效果。</div>
<button class="js-back-to-top back-to-top" title="回到頭部">︽</button>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function () {
var $win = $(window);
var $backToTop = $('.js-back-to-top');
// 當用戶滾動到離頂部100像素時，展示回到頂部按鈕
$win.scroll(function () {
if ($win.scrollTop() > 100) {
$backToTop.show();
} else {
$backToTop.hide();
}
});
// 當用戶點擊按鈕時，通過動畫效果返回頭部
$backToTop.click(function () {
$('html, body').animate({scrollTop: 0}, 200);
});
});
</script>
</body>
</html>
最最后是蜜蜂小提示時間，讓您了解更多。
蜜蜂小提示
Javascript操作的類名，使用“js-”開頭，可以和CSS類區分開來，使邏輯更清晰，修改時也不用擔心改錯了。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
