在做项目网址时候,经常会用到实现页面缓慢滚动到顶部,今天我就来讲一下我知道的方法吧。
1,语法:window.scrollTo(options)
options 是一个包含三个属性的对象
top 等同于 y-coord
left 等同于 x-coord
behavior 类型String,表示滚动行为
behavior支持参数:
- smooth(平滑滚动),
- instant(瞬间滚动),
- 默认值auto,实测效果等同于instant
2,案例
<div class="scrollChild">
<div>第一种</div>
<button @click="scroll()">第一种方法</button>
</div>
<script>
export default {
data() {
return {
scrollTop:''
};
},
mounted() {
this.scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
},
methods: {
scroll() {
window.scrollTo({
top: 0,
behavior: "smooth"
});
}
}
}
<script>
git.gif