以前大部分時間都是在做b端相關的項目，在實現此類需求時，通常都是直接借助 a 標簽搞定，現在做c端了，對交互性的要求一下就提升了，此時 a 標簽就遠遠不能滿足要求了，需要借助js來實現此類需求，特此記錄。
a 標簽
首先放出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>
然后具體操作步驟如下
將a標簽放到指定元素的附近 然后通過點擊事件生成 a 標簽 觸發a標簽事件 刪除a標簽代碼如下
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)
})
效果如下圖所示
效果很明顯，在事件觸發之后，頁面立馬跑到的頂部，在交互性沒啥要求的時候，這種做法確實沒啥問題，不過要求高了之后就不行了，會顯得有些突兀。
經大佬提示，可以在style中設置 html, body { scroll-behavior:smooth; }，可以達到和下面兩個api的behavior 參數為 smooth 的效果是一樣的
scrollTo()
此 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' })
})
效果如下圖所示
從效果上來看，相較于 不過它對iframe的支持度不夠，在我所遇到的項目中iframe的占比還不小，還請謹慎使用a 標簽，該api支持動畫，使得頁面更絲滑
Element.scrollIntoView()
該 api 相較于上一個，節點信息更加的明確，操作方法也更加的簡潔，更利于后續的維護
代碼如下
const backTop2 = document.getElementById("backTop2")
const TOP = document.getElementById("top")
backTop2.addEventListener("click", function (e) {
TOP.scrollIntoView({ behavior: "smooth" })
})
效果如下圖所示
從效果上來看，該api和scrollTo的作用是一致的，但是從代碼結構上來說，scrollIntoView會更加的簡潔且在iframe中表現也很優秀，基本上被用到的頻率更高
以上三種方法是我目前比較常用的，更多相關js回到指定位置內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://juejin.cn/post/6906142651121139719
