在线成人,精品久久久久久久,精品一区二区av

以前大部分時間都是在做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)
  })

效果如下圖所示

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

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

經大佬提示，可以在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' })
  })

效果如下圖所示

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

~~從效果上來看，相較于 a 標簽，該api支持動畫，使得頁面更絲滑~~ 不過它對iframe的支持度不夠，在我所遇到的項目中iframe的占比還不小，還請謹慎使用

Element.scrollIntoView()

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

代碼如下

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

效果如下圖所示

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