标签：box vue 封装 2px window 组件 scrollTop document border

返回顶部组件封装

移动H5网页端每一页超过1.5屏则出现返回顶部得按钮，随页面滑动固定在左下角

<template>
    <div
        v-show="showToTop"
        id="top-box"
        @click="handleToTop">
        <div class="go-top">顶部</div>
    </div>
</template>

<script>
export default {
    name: 'ToTop',
    data() {
        return {
            showToTop: false,
            screenH: 0
        }
    },
    mounted() {
        window.addEventListener('scroll', this.scrollTop);
        this.$nextTick(() => { this.screenH = window.screen.height });
    },
    destroyed() {
        window.removeEventListener('scroll', this.scrollTop);
    },
    methods: {
        handleToTop() {
            // document.documentElement.scrollTop = document.body.scrollTop = 0;
            const c = document.documentElement.scrollTop || document.body.scrollTop;
            if (c > 0) {
                window.requestAnimationFrame(this.handleToTop);
                window.scrollTo(0, c - c / 5);
            }
        },
        scrollTop() {
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop > this.screenH * 1.5) {
                this.showToTop = true
            } else {
                this.showToTop = false
            }
        }
    }
}
</script>

<style lang="less" scoped>
#top-box{
    position:fixed;
    bottom:70px;
    right:12px;
    .go-top{
        width: 11.733vw;
        height: 11.733vw;
        background: #FFFFFF;
        line-height: 2.2em;
        box-shadow: 0px 2px 10px 0px rgba(103, 139, 219, 0.15);
        border: 1px solid #E4E4E4;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        border-radius: 50%;
        font-size:12px;
        box-sizing: border-box;
        padding-top: 4vw;
        color: #66686B;
        text-align: center;
        position: relative;
        &:before{
            content: '';
            position: absolute;
            top: 25%;
            right: 4.5vw;
            width: 2vw;
            height: 2vw;
            border: 2px solid #66686B;
            border-width: 2px 2px 0 0;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
    }
}

标签：box,vue,封装,2px,window,组件,scrollTop,document,border
来源： https://blog.csdn.net/panda329/article/details/114928791

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。