h5浮动按钮

最新推荐文章于 2024-05-16 21:09:48 发布

weixin_33794672

最新推荐文章于 2024-05-16 21:09:48 发布

阅读量2.5k

点赞数

文章标签： javascript python 前端 ViewUI

原文链接：https://my.oschina.net/u/2365397/blog/3049411

版权

2019独角兽企业重金招聘Python工程师标准>>>

1、css

.topBtn{
    position: fixed;
    bottom: 5rem;
    right: 0.8rem;
    width: 2.2rem;
    height: 2.2rem;
    background: url(../image/topBtn.png) no-repeat center;
    background-size: 100% auto;
    z-index: 9999;
    -webkit-transition:  opacity .3s ease;
}

2、js根据ID，滚动到顶部

$('#content').animate({scrollTop: '0px'}, 100);

3、根据vue加入页面滚动监听事件，判断浮动按钮是否显示

/**
 * 初始化页面视图
 *
 * @author xiaohei 2019-05-09
 */
function fnInitView() {
    vm = new Vue({
        el: ".wrap",
        data: {
            isTop: false,//跳转顶部按钮是否显示
        },
        methods: {
            handleScroll(){
                let page = document.getElementById('content');
                console.log(page.scrollTop,page.clientHeight,page.scrollTop+page.clientHeight,page.scrollHeight);
                if(page.scrollTop >= page.clientHeight/2){
                    this.isTop = true;
                } else {
                    this.isTop = false;
                }
            },
        },
        mounted(){
            document.getElementById('content').addEventListener('scroll',this.handleScroll);
        },
        beforeDestroy(){
            document.getElementById('content').removeEventListener('scroll', this.handleScroll);
        }
    });
}

转载于:https://my.oschina.net/u/2365397/blog/3049411