vue监听某个div滚动条滚动事件，距离顶部的距离，返回div顶部，实现一个demo

好的，我可以为您提供一个简单的 Vue Demo，实现监听某个 div 滚动条滚动事件，显示距离顶部的距离并返回 div 顶部的功能。以下是示例代码：

<template>
  <div class="container" ref="scrollContainer" @scroll="handleScroll">
    <div class="content">
      <p v-for="item in items" :key="item">{{ item }}</p>
    </div>
    <div class="back-to-top" v-if="showBackToTop" @click="backToTop">
      Back to Top
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"],
      scrollTop: 0,
      showBackToTop: false,
    };
  },
  methods: {
    handleScroll() {
      this.scrollTop = this.$refs.scrollContainer.scrollTop;
      this.showBackToTop = this.scrollTop > 100;
    },
    backToTop() {
      this.$refs.scrollContainer.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
  },
};
</script>

在这个示例中，我们使用 `ref` 属性引用了一个名为 `scrollContainer` 的 div 元素，然后监听了该元素的 `scroll` 事件，通过 `handleScroll` 方法获取了当前距离顶部的距离，并根据该距离控制了一个名为 `back-to-top` 的 div 元素的显示与隐藏。当该元素被点击时，我们使用 `scrollTo` 方法将该元素滚动到顶部。

此外，我们还通过 `v-for` 指令渲染了一个包含若干个段落元素的 div，用于测试滚动事件的触发。