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>