整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
大家介紹如何通過 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);
}首先放出html
<body>
<contain class="test1">
<a name="topAnchor"></a>
<div id="top">我是頂部</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</contain>
<footer>
<button id="backTop1">第一種方式回到頂部</button>
<button id="backTop2">第二種方式回到頂部</button>
<button id="backTop3">第三種方式回到頂部</button>
</footer>
</body>
然后具體操作步驟如下
const backTop1 = document.getElementById("backTop1")
backTop1.addEventListener("click", function (e) {
let a = document.createElement("a")
a.href = "#topAnchor"
e.target.appendChild(a)
a.onclick = function (e) {
e.stopPropagation()
}
a.click()
e.target.removeChild(a)
})
效果如下圖所示
效果很明顯，在事件觸發之后，頁面立馬跑到的頂部，在交互性沒啥要求的時候，這種做法確實沒啥問題，不過要求高了之后就不行了，會顯得有些突兀。
此 api 需要傳遞 DOM元素相對于window的 left 和 top 的距離，此例子僅展示簡單demo，只考慮 top 坐標
當然它還有一個 behavior 參數，將其設置為 smooth 后，將會出現滑動效果 步驟如下：
代碼如下：
const backTop2 = document.getElementById("backTop2")
const TOP = document.getElementById("top")
const y = TOP.offsetTop
const backTop3 = document.getElementById("backTop3")
backTop3.addEventListener("click", function (e) {
window.scrollTo({ top: y, left: 0, behavior: 'smooth' })
})
效果如下圖所示
從效果上來看，相較于a標簽，該api支持動畫，使得頁面更絲滑
該 api 相較于上一個，節點信息更加的明確，操作方法也更加的簡潔，更利于后續的維護
代碼如下
const backTop2 = document.getElementById("backTop2")
const TOP = document.getElementById("top")
backTop2.addEventListener("click", function (e) {
TOP.scrollIntoView({ behavior: "smooth" })
})
效果如下圖所示
從效果上來看，該api和scrollTo的作用是一致的，但是從代碼結構上來說，scrollIntoView會更加的簡潔
以上三種方法是我目前比較常用的，如有不同之處，還望諸君不吝賜教！
作者：pengpeng
鏈接：https://juejin.cn/post/6906142651121139719
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
