快捷導(dǎo)航

js回到頁(yè)面指定位置的三種方式

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

這篇文章主要介紹了js回到頁(yè)面指定位置的三種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

a 標(biāo)簽

首先放出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標(biāo)簽放到指定元素的附近
然后通過(guò)點(diǎn)擊事件生成 a 標(biāo)簽
觸發(fā)a標(biāo)簽事件
刪除a標(biāo)簽

代碼如下

 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ā)之后，頁(yè)面立馬跑到的頂部，在交互性沒(méi)啥要求的時(shí)候，這種做法確實(shí)沒(méi)啥問(wèn)題，不過(guò)要求高了之后就不行了，會(huì)顯得有些突兀。

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

scrollTo()

此 api 需要傳遞 DOM元素相對(duì)于window的 left 和 top 的距離，此例子僅展示簡(jiǎn)單demo，只考慮 top 坐標(biāo)

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

計(jì)算目標(biāo)元素距離頂部的距離
通過(guò)事件觸發(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' })
  })

效果如下圖所示

~~從效果上來(lái)看，相較于 a 標(biāo)簽，該api支持動(dòng)畫(huà)，使得頁(yè)面更絲滑~~ 不過(guò)它對(duì)iframe的支持度不夠，在我所遇到的項(xiàng)目中iframe的占比還不小，還請(qǐng)謹(jǐn)慎使用

Element.scrollIntoView()

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

代碼如下

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

效果如下圖所示