js回到頁面指定位置的三種方式

更新時間：2020年12月17日 08:55:18 作者：pengpeng

這篇文章主要介紹了js回到頁面指定位置的三種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

以前大部分時間都是在做b端相關的項目，在實現(xiàn)此類需求時，通常都是直接借助 a 標簽搞定，現(xiàn)在做c端了，對交互性的要求一下就提升了，此時 a 標簽就遠遠不能滿足要求了，需要借助js來實現(xiàn)此類需求，特此記錄。

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 標簽
觸發(fā)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)
  })

效果如下圖所示

效果很明顯，在事件觸發(fā)之后，頁面立馬跑到的頂部，在交互性沒啥要求的時候，這種做法確實沒啥問題，不過要求高了之后就不行了，會顯得有些突兀。

經(jīng)大佬提示，可以在style中設置 html, body { scroll-behavior:smooth; }，可以達到和下面兩個api的behavior 參數(shù)為 smooth 的效果是一樣的

scrollTo()

此 api 需要傳遞 DOM元素相對于window的 left 和 top 的距離，此例子僅展示簡單demo，只考慮 top 坐標

當然它還有一個 behavior 參數(shù)，將其設置為 smooth 后，將會出現(xiàn)滑動效果步驟如下：

計算目標元素距離頂部的距離
通過事件觸發(fā)

代碼如下：

  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支持動畫，使得頁面更絲滑~~ 不過它對iframe的支持度不夠，在我所遇到的項目中iframe的占比還不小，還請謹慎使用

Element.scrollIntoView()

該 api 相較于上一個，節(jié)點信息更加的明確，操作方法也更加的簡潔，更利于后續(xù)的維護

代碼如下

 const backTop2 = document.getElementById("backTop2")
  const TOP = document.getElementById("top")
  backTop2.addEventListener("click", function (e) {
    TOP.scrollIntoView({ behavior: "smooth" })
  })

效果如下圖所示