回顶部及缓动滚动到某个位置

前言

今天这篇文章应该是javascript回到顶部滑动效果及点击导航滑动到相应热点的效果，这篇文章的升级版。写这篇文章的时候，可能三大框架（react,vue,angular）等还没有流行，还是jquery的时代。如今，前端发展迅速，这篇文章已经过时了。那么新时代，热点动态滚动，及回到顶部用什么方法呢？

实现方案

新时代实现这个动画方法很多，今天主要介绍4种吧，由推荐的简单办法，到js方案。

纯css方案

css 有个

scroll-behavior: smooth;

加上这个属性之后，锚点跳转就可以平滑起来

 <nav>
    <a href="#page-1">1</a>
    <a href="#page-2">2</a>
    <a href="#page-3">3</a>
  </nav>
  <scroll-container>
    <scroll-page id="page-1">1</scroll-page>
    <scroll-page id="page-2">2</scroll-page>
    <scroll-page id="page-3">3</scroll-page>
  </scroll-container>
<style>
a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav, scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}
</style>  

大家可以将上面代码copy到html里面尝试一下

js的scrollIntoView方法

这个方法很简单，适合js中运用，例如

const nowDom = document.getElementById(onelist.target)
if (nowDom) {
  nowDom.scrollIntoView({
    behavior: 'smooth'
  })

这样就可以平滑滚动了

封装方法一

分装如下js方法，可以实现向上滚动动画

backToTop(backPosition) {
  if (this.isMoving) return
  const start = window.pageYOffset
  let i = 0
  this.isMoving = true
  this.interval = setInterval(() => {
    const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
    if (next <= backPosition) {
      window.scrollTo(0, backPosition)
      clearInterval(this.interval)
      this.isMoving = false
    } else {
      window.scrollTo(0, next)
    }
    i++
  }, 16.7)
},
easeInOutQuad(t, b, c, d) {
  if ((t /= d / 2) < 1) return c / 2 * t * t + b
  return -c / 2 * (--t * (t - 2) - 1) + b
}

封装方法二

scrollSmoothTo(position) {
  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function(callback, element) {
      return setTimeout(callback, 17)
    }
  }
  // 当前滚动高度
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  // 滚动step方法
  var step = function() {
    // 距离目标滚动距离
    var distance = position - scrollTop
    // 目标滚动位置
    scrollTop = scrollTop + distance / 5
    if (Math.abs(distance) < 1) {
      window.scrollTo(0, position)
    } else {
      window.scrollTo(0, scrollTop)
      requestAnimationFrame(step)
    }
  }
  step()
}

最后的这两个方法，可以传入一个位置信息过来，然后就可以滚动到某个位置了，实现思路都是运用js

上面基本是罗列了回到顶部市面上最常用的方式了！