底部置顶效果

<template>
    <div id="app">
        <v-header></v-header>
        <div>
            <router-view />
        </div>
        <v-footer></v-footer>
        <div v-show="isGotop" @click="goTop">
            <i class="el-icon-caret-top goTop"></i>
        </div>
        
    </div>
</template>

<script>
    export default {
        name: ‘App‘,
        data() {
            return {
                isGotop: false
            }

        },
        created() {
            this.listenerFunction();
        },
        beforeDestroy() {
            document.removeEventListener("scroll", this.listenerFunction);
            let vm = this
            clearInterval(vm.topTime)
        },
        methods: {
            goTop() {
                let vm = this
                vm.topTime = setInterval(function() {
                    if (document.body.scrollTop) {
                        document.body.scrollTop -= 10
                        if (document.body.scrollTop <= 0) {
                            document.body.scrollTop = 0
                            clearInterval(vm.topTime)
                        }
                    } else {
                        document.documentElement.scrollTop -= 10
                        if (document.documentElement.scrollTop <= 0) {
                            document.documentElement.scrollTop = 0
                            clearInterval(vm.topTime)
                        }
                    }
                }, 20)
            },
            listenerFunction(e) {
                document.addEventListener(‘scroll‘, this.handleScroll, true);
            },
            handleScroll() {
                var bodyHeight = document.documentElement.clientHeight //可视区
                var ViewHeight = this.getViewPort().height
                var documentHeight = this.getDocumentPort().height
                var scrollTop = this.getScrollTop().height
                var top = ViewHeight + scrollTop
                if (top > Math.round(documentHeight / 2) && scrollTop !== 0) {
                    this.isGotop = true
                } else {
                    this.isGotop = false
                }
            },
            getScrollTop() {
                if (window.pageYOffset !== undefined) {
                    return {
                        height: window.pageYOffset
                    }
                } else {
                    return {
                        height: document.documentElement.scrollTop
                    }
                }
            },

            // *视口的大小，部分移动设备浏览器对innerWidth的兼容性不好，需要
            //  *document.documentElement.clientWidth或者document.body.clientWidth
            //  *来兼容（混杂模式下对document.documentElement.clientWidth不支持）。
            //  *使用方法 ： getViewPort().width;

            getViewPort() {
                if (document.compatMode == "BackCompat") { //浏览器嗅探，混杂模式
                    return {
                        width: document.body.clientWidth,
                        height: document.body.clientHeight
                    };
                } else {
                    return {
                        width: document.documentElement.clientWidth,
                        height: document.documentElement.clientHeight
                    };
                }
            },
            getDocumentPort() {
                if (document.compatMode == "BackCompat") {
                    return {
                        width: document.body.scrollWidth,
                        height: document.body.scrollHeight
                    };
                } else {
                    return {
                        width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),
                        height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
                    }
                }
            }
        }
    }
</script>

<style>
    #app {
        font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin: 0;
        padding: 0;
        background-color: #fbfbfb;
    }
</style>
<style lang="less" scoped>
    .goTop {
        font-size: 50px;
        color: #1769D9;
        position: fixed;
        bottom: 100px;
    }

    @media screen and (max-width: 1366px) {
        .goTop {
            right: 10px;
        }
    }

    @media screen and (min-width: 1366px) {
        .goTop {
            right: 10px;
        }
    }

    @media screen and (min-width: 1440px) {
        .goTop {
            right: 40px;
        }
    }

    @media screen and (min-width: 1680px) {
        .goTop {
            right: 180px;
        }
    }

    @media screen and (min-width: 1920px) {
        .goTop {
            right: 240px;
        }
    }
</style>