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

Question

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

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

Answer 1

感觉你要的是这样的

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

Answer 2

写个自定义指令吧，复用性高一点

Answer 3

理想结构应该是这样，用css定位到屏幕固定位置即可，如果第一屏要隐藏，可以通过组件内部的JS来判断。望采纳

<div id="app">
    <div>内容</div>
    <scroll></scroll>
</div>