我們經(jīng)常在b端網(wǎng)站里面，使用返回頂部的效果，很早之前，借助 jq 也可以實(shí)現(xiàn)；a 標(biāo)簽也可以實(shí)現(xiàn)。伴隨的 c 端的到來(lái)，滿足不了需求，我們就需要用 js 來(lái)實(shí)現(xiàn)了

以下我記錄了3種方案，供大家參考

1. a 標(biāo)簽
2. scrollTo()
3. scrollIntoView()

但是，scrollTo() 和 scrollIntoView() 方法有兼容性問(wèn)題，在 safari 里，不支持 scroll-behavior:smooth，所以沒(méi)有滾動(dòng)效果

具體實(shí)現(xiàn)，如圖：

image.png

大家還記得jq 是如何實(shí)現(xiàn)的么？

// 是不是超級(jí)簡(jiǎn)單呢
$("#top").click(function(){
    $("html,body").animate( {"scrollTop":0},300 );
});

a 標(biāo)簽

• 將 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)
  })

不足：回到頂部，沒(méi)有緩動(dòng)效果，比較生硬。style 設(shè)置：html, body { scroll-behavior:smooth; }可以滿足

scrollTo()

• 計(jì)算目標(biāo)元素距離頂部的距離
• 通過(guò)事件觸發(fā)

代碼如下：

const backTop2 = document.getElementById('backTop2');
  const Top = document.getElementById('top');
  const y = Top.offsetTop
// offsetTop是原生 js 的方法，它獲取的是你綁定元素上邊框相對(duì)離自己最近且position屬性為非static的祖先元素的偏移量，返回值類型是 number，不帶 px 單位
  backTop2.addEventListener('click', function(e) {
    window.scrollTo({ top: y, behavior: 'smooth' })
  })

不足：對(duì) iframe 的支持度不夠，如果項(xiàng)目中，iframe 的占比大的話，謹(jǐn)慎使用

scrollIntoView()

相比第二種，這種寫法更加簡(jiǎn)潔、利于維護(hù)；而且 scrollIntoView 在iframe 中表現(xiàn)也很優(yōu)秀，被用到的頻率更高

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

參考文檔：

https://juejin.cn/post/6906142651121139719

scrollIntoView：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
offsetTop 以及相關(guān)屬性詳解：https://blog.csdn.net/zh_rey/article/details/78967174