回到顶部的方法

我们经常在b端网站里面，使用返回顶部的效果，很早之前，借助 jq 也可以实现；a 标签也可以实现。伴随的 c 端的到来，满足不了需求，我们就需要用 js 来实现了

以下我记录了3种方案，供大家参考

1. a 标签
2. scrollTo()
3. scrollIntoView()

但是，scrollTo() 和 scrollIntoView() 方法有兼容性问题，在 safari 里，不支持 scroll-behavior:smooth，所以没有滚动效果

具体实现，如图：

image.png

大家还记得jq 是如何实现的么？

// 是不是超级简单呢
$("#top").click(function(){
    $("html,body").animate( {"scrollTop":0},300 );
});

a 标签

• 将 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; }可以满足

scrollTo()

• 计算目标元素距离顶部的距离
• 通过事件触发

代码如下：

const backTop2 = document.getElementById('backTop2');
  const Top = document.getElementById('top');
  const y = Top.offsetTop
// offsetTop是原生 js 的方法，它获取的是你绑定元素上边框相对离自己最近且position属性为非static的祖先元素的偏移量，返回值类型是 number，不带 px 单位
  backTop2.addEventListener('click', function(e) {
    window.scrollTo({ top: y, behavior: 'smooth' })
  })

不足：对 iframe 的支持度不够，如果项目中，iframe 的占比大的话，谨慎使用

scrollIntoView()

相比第二种，这种写法更加简洁、利于维护；而且 scrollIntoView 在iframe 中表现也很优秀，被用到的频率更高

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 以及相关属性详解：https://blog.csdn.net/zh_rey/article/details/78967174