es6

实现页面缓慢滚动到顶部

2020-04-02  本文已影响0人  jasmine_6aa1

在做项目网址时候,经常会用到实现页面缓慢滚动到顶部,今天我就来讲一下我知道的方法吧。

1,语法:window.scrollTo(options)

options 是一个包含三个属性的对象

top 等同于 y-coord
left 等同于 x-coord
behavior 类型String,表示滚动行为

behavior支持参数:

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
上一篇 下一篇

猜你喜欢

热点阅读