平滑滚动的3种实现方式
引言:锚点跳转或者返回页面顶部的时候通常是“嗖”的一下直接滚动到目标位置,缺少动画效果,感觉有点奇怪。这里提供3种滚动实现方式示例都在vue当中实现<template><div class="scroll"><a href="#bottom"> <div class="tag">这里是a标签</div> </a><div
·
引言:锚点跳转或者返回页面顶部的时候通常是“嗖”的一下直接滚动到目标位置,缺少动画效果,感觉有点奇怪。这里提供3种滚动实现方式
示例都在vue当中实现
<template>
<div class="scroll">
<a href="#bottom"> <div class="tag">这里是a标签</div> </a>
<div class="placeholder">这里是中间占位元素</div>
<a name="bottom"> <div class="tag">这里是目标点</div> </a>
</div>
</template>
<style >
.scroll .tag {
height: 100px;
border: 1px solid #000;
}
.placeholder {
height: 1000px;
background: rgb(255, 244, 213);
}
</style>
视图长这样:
点击a标签会瞬间滚动到底部锚点,于是加几行css代码
1、通过css实现平滑滚动:scroll-behavior: smooth;
<template>
<div class="scroll">
<a href="#bottom"> <div class="tag">这里是a标签</div> </a>
<div class="placeholder">这里是中间占位元素</div>
<a name="bottom"> <div class="tag">这里是目标点</div> </a>
</div>
</template>
<style >
.scroll .tag {
height: 100px;
border: 1px solid #000;
}
.placeholder {
height: 1000px;
background: rgb(255, 244, 213);
}
/* 加入css代码 */
html,
body {
scroll-behavior: smooth;
}
</style>
这时候点击a标签就能够平滑滚动了
2、通过element.scrollIntoView()方法实现
<template>
<div class="scroll">
<a href="#bottom"> <div class="tag">这里是a标签</div> </a>
<!-- 这里绑定点击事件toBottom -->
<div class="placeholder" @click="toBottom">这里是中间占位元素</div>
<!-- ref获取元素 -->
<a name="bottom"> <div class="tag" ref="tagA">这里是目标点</div> </a>
</div>
</template>
<script>
export default {
methods: {
toBottom() {
this.$refs.tagA.scrollIntoView({ behavior: 'smooth' });// 利用scrollIntoView方法来平滑滚动
}
}
};
</script>
<style >
.scroll .tag {
height: 100px;
border: 1px solid #000;
}
.placeholder {
height: 1000px;
background: rgb(255, 244, 213);
}
</style>
点击中间占位元素就会平滑滚动
3、原生js 实现
<template>
<div class="scroll">
<a href="#bottom"> <div class="tag">这里是a标签</div> </a>
<!-- 这里绑定点击事件animate-->
<div class="placeholder" @click="animate">这里是中间占位元素</div>
<a name="bottom"> <div class="tag">这里是目标点</div> </a>
</div>
</template>
<script>
export default {
methods: {
animate() {
/**
* requestAnimationFrame的兼容处理
* requestAnimationFrame(fn)在每一帧会执行一次fn,类似setTimeout(fn,16.7)
*/
const requestAnimationFrame =
window.requestAnimationFrame ||
function (fn) {
window.setTimeout(fn, 17); // 浏览器频率是60帧,即1000/60 约等于 17
};
const ele = document.body.scrollTop ? document.body : document.documentElement; // 滚动条有可能在body上也有可能在html上
var scrollTop = ele.scrollTop; // 获取滚动条的位置
/**
* 滚动速率
* rate 越小滚动越快
*/
const rate = 5;
const top = function () {
scrollTop = scrollTop + (0 - scrollTop) / rate; // 缓入动画
// 临界判断,终止动画
if (scrollTop <= 1) {
ele.scrollTop = 0;
return;
}
ele.scrollTop = scrollTop;
// 递归调用动画
requestAnimationFrame(top);
};
top();
}
}
};
</script>
<style >
.scroll .tag {
height: 100px;
border: 1px solid #000;
}
.placeholder {
height: 1000px;
background: rgb(255, 244, 213);
}
</style>
点击中间元素就会平滑滚动到顶部
requestAnimationFrame是浏览器自带方法,它会在页面刷新下一帧的一瞬间调用,相当于一个定时器settimeout
更多推荐
已为社区贡献2条内容
所有评论(0)