回到顶部

<template>
    <div class="">
        <div class="flexd">
            <div class="top" @click="goTop" ref="btn"><i></i></div>
            <div class="dialogue">
                <div><i></i></div>
                <p @click="connectConver('1')">立即咨询</p>
            </div>
            <div class="mining">
                <div><i></i></div>
                <p @click="connectConver('2')">集采</p>
            </div>
            <div class="order">
                <div><i></i></div>
                <p @click="connectConver('3')">集采清单</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: [],
    components: {},
    data () {
        return {}
    },
    watch: {},
    computed: {},
    methods: {
     
        needScroll () {
            let clientHeight = document.documentElement.clientHeight
            let obtn = this.$refs.btn
            window.onscroll = function () {
                let osTop = document.documentElement.scrollTop || document.body.scrollTop
                if (osTop >= clientHeight) {
                    obtn.style.display = 'block'
                } else {
                    obtn.style.display = 'none'
                }
                if (!this.isTop) {
                    // clearInterval(timer)
                }
                this.isTop = false
            }
        },
        goTop () { // 备注回到头部
            let timer = setInterval(function () {
                let osTop = document.documentElement.scrollTop || document.body.scrollTop
                let ispeed = Math.floor(-osTop / 5)
                document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
                this.isTop = true
                if (osTop === 0) {
                    clearInterval(timer)
                }
            }, 30)
        }
    },
    created () {
    },
    mounted () {
    }
}
</script>

<style lang="scss">
    .flexd {
        position: fixed;
        right: 0;
        bottom: 150px;
        z-index: 10000;
        .dialogue,.mining,.order,.top{
            div{
                width: 40px;
                height: 40px;
                text-align: center;
            }
            p {
                padding: 0 7px;
                width: 40px;
                text-align: center;
                background: $white;
                cursor: pointer;
            }
        }
        .top {
            background: #33cde5;
            cursor: pointer;
            display: none;
            i {
                display: inline-block;
                margin-top: 9px;
                margin-left: 11px;
                width: 16px;
                height: 21px;
                background: url("../static/img/index/index_fiex_icon.png")
                no-repeat 0px 0px;
            }
        }
        .dialogue {
            div {
                background: #00b7d3;
                i {
                    display: inline-block;
                    margin-top: 10px;
                    width: 22px;
                    height: 18px;
                    background: url("../static/img/index/index_fiex_icon.png")
                    no-repeat -25px 0px;
                }
            }
            p {
                height: 80px;
                display: none;
            }
        }
        .mining {
            div {
                background: #33cde5;
                i {
                    display: inline-block;
                    margin-top: 6px;
                    width: 25px;
                    height: 24px;
                    background: url("../static/img/index/index_fiex_my.png")
                    no-repeat 3px 0px;
                }
            }
            p {
                height: 40px;
                display: none;
            }
        }
        .order{
            div {
                background: #33cde5;
                i {
                    display: inline-block;
                    margin-top: 6px;
                    width: 25px;
                    height: 24px;
                    background: url("../static/img/index/index_fiex_order.png")
                    no-repeat 2px 0px;
                }
            }
            p {
                height: 80px;
                display: none;
            }
        }
        .mining:hover p,.dialogue:hover p,.order:hover p{
            display: block;
        }
    }
</style>

 

转载于:https://www.cnblogs.com/taochengyong/p/10870425.html