Vue.js 滚动到顶部 - JavaScript

在 Vue.js 中，我们可以通过使用 ref 来获取 DOM 元素，并使用 scrollTop 将页面滚动到顶部。

获取 DOM 元素

使用 ref 来获取 DOM 元素，我们需要在需要引用的元素上添加 ref="element" 属性。

<template>
  <div>
    <h1 ref="title">标题</h1>
    <p>内容。。。</p>
  </div>
</template>

我们可以在组件的 mounted 生命周期钩子中使用 $refs 对象来获取 DOM 元素。

mounted() {
  const title = this.$refs.title;
}

将页面滚动到顶部

一旦我们获取了 DOM 元素，我们就可以将页面滚动到顶部了。

mounted() {
  const title = this.$refs.title;
  window.scrollTo(0, title.offsetTop);
}

这个例子中，我们使用 window.scrollTo 方法来将页面滚动到 0（表示页面顶部）和 title.offsetTop（表示标题元素距离顶部的距离）的位置。

组合在一起

最终，我们可以在 Vue.js 中将这些代码片段组合在一起来滚动到页面顶部。

<template>
  <div>
    <h1 ref="title">标题</h1>
    <p>内容。。。</p>
    <button @click="scrollToTop">滚动到顶部</button>
  </div>
</template>

<script>
export default {
  methods: {
    scrollToTop() {
      const title = this.$refs.title;
      window.scrollTo(0, title.offsetTop);
    }
  }
}
</script>

在这个例子中，我们在模板中添加了一个按钮，并在组件中添加了一个 scrollToTop 方法来将页面滚动到顶部。

我们在方法中使用了 this.$refs.title 来获取标题元素，然后使用 window.scrollTo 方法将页面滚动到顶部。

Markdown 代码片段：

## 获取 DOM 元素

使用 `ref` 来获取 DOM 元素，我们需要在需要引用的元素上添加 `ref="element"` 属性。

```html
<template>
  <div>
    <h1 ref="title">标题</h1>
    <p>内容。。。</p>
  </div>
</template>

我们可以在组件的 mounted 生命周期钩子中使用 $refs 对象来获取 DOM 元素。

mounted() {
  const title = this.$refs.title;
}

将页面滚动到顶部

一旦我们获取了 DOM 元素，我们就可以将页面滚动到顶部了。

mounted() {
  const title = this.$refs.title;
  window.scrollTo(0, title.offsetTop);
}

这个例子中，我们使用 window.scrollTo 方法来将页面滚动到 0（表示页面顶部）和 title.offsetTop（表示标题元素距离顶部的距离）的位置。

组合在一起

最终，我们可以在 Vue.js 中将这些代码片段组合在一起来滚动到页面顶部。

<template>
  <div>
    <h1 ref="title">标题</h1>
    <p>内容。。。</p>
    <button @click="scrollToTop">滚动到顶部</button>
  </div>
</template>

<script>
export default {
  methods: {
    scrollToTop() {
      const title = this.$refs.title;
      window.scrollTo(0, title.offsetTop);
    }
  }
}
</script>