js回到頁面指定位置的三種方式
阿新 • • 發佈：2020-12-20
以前大部分時間都是在做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回到指定位置內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！