大家介紹如何通過 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小時內與您取得聯系。