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

前言

今天这篇文章应该是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>1</scroll-page>
<scroll-page>2</scroll-page>
<scroll-page>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

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