vue页面添加回到顶部的功能

Question

vue项目中，有好多页面需要添加回到顶部的功能，能不能做一个组件或者指令，可以在好多页面中重复使用。引用的时候能传參更好（设置距离底部的高度）。我自己做了一个组件，scroll组件标签像一个仅次于body标签的大容器，把页面所要展现的内容包含了起来，感觉这样不太合适。如下图所示

ps：回到顶部功能只是一个按钮，一页内容加载不完，滑动到底部的时候就会显示，平时是不显示的，如下图所示：

Answer 1

感觉你要的是这样的&nbsp; &nbsp;<template>&nbsp; &nbsp; &nbsp; &nbsp; <div class="scrollTop" @click="toTop">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </template>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; export default {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'scroll-top',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; props: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; toBottom: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: Number,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default: 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; methods: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; toTop() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.documentElement.scrollTop = document.body.scrollTop = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mounted() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.querySelector('.scrollTop').style.bottom = this.toBottom;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script>&nbsp; &nbsp; <style scoped>&nbsp; &nbsp; &nbsp; &nbsp; .scrollTop {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: fixed;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style>