点击返回顶部的写法

小灰灰 2023-06-21 07:21 20阅读 0赞

**现PC端页面有个需求是，右侧有一个导航栏目，要求鼠标下滑到一定程度，出现返回顶部的按钮：**

<div class="toolbar">
        <ul>
            <li>
                <span class="iconfont icon-zl_kefu"></span>
                <p class="customer_service">客服</p>
            </li>
            <li class="Phone">
                <span class="iconfont icon-zl_dianxun"></span>
                <p style="width: 130px;padding-left: 4px;text-align: left;">400-888-8906</p>
            </li>
            <li class="Qrcode">
                <span class="iconfont icon-zl_erweima"></span>
                <p class="qrcode">
                    <img src="/www/xgwy/img/weixin_qrcode.png" alt="UIOT超级智慧家微信公众号"/>
                    <a>请扫码关注</a>
                </p>
            </li>
            <li class="return">
                <span class="iconfont icon-zl_zhiding"></span>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        //滑动高度监测
        var scrollTop;
        var timer = null;
        //监测当前屏幕高度
        window.onscroll = function() {
            scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            return scrollTop;
        }
        //点击返回顶部
        $('.return').click(function(){
            clearInterval(timer);
            timer = setInterval(function() {
                var now = scrollTop;
                var speed = (0 - now) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
                if(scrollTop == 0) {
                    clearInterval(timer);
                }
                document.documentElement.scrollTop = scrollTop + speed;
                document.body.scrollTop = scrollTop + speed;
            }, 35)
        });
        //菜单栏吸附
        $().ready(function() {
            $(window).scroll(function() {
                var scrollTop = $(window).scrollTop(); //获取当前滑动的位置
                if(scrollTop > 500) {
                    $('.toolbar').addClass('block');
                    $('.return').addClass('block');
                }else{
                    $('.toolbar').removeClass('block');
                    $('.return').removeClass('block');
                }
            })
        });
    
        // 点击跳转到商务通客服
        $(".customer_service").on('click', function () {
            window.open("${commerceUrl!}");
        })
    </script>

**样式控制为：**

/*右侧导航栏*/
    @font-face {
    	font-family: 'icomoon';
    	src:url('../fonts/icomoon.eot');
    	src:url('../fonts/icomoon.eot')format('embedded-opentype'),
    	url('../fonts/icomoon.ttf')format('truetype'),
    	url('../fonts/icomoon.woff')format('woff'),
    	url('../fonts/icomoon.svg')format('svg');
    	font-weight: normal;
    	font-style: normal;
    	font-display: block;
    }
    .iconfont {
    	font-family: "icomoon" !important;
    	font-size: 16px;
    	font-style: normal;
    	-webkit-font-smoothing: antialiased;
    	-moz-osx-font-smoothing: grayscale;
    }
    .icon-zl_dianxun:before {
    	content: "\e900";
    	font-size: 22px;
    }
    .icon-zl_erweima:before {
    	content: "\e901";
    	font-size: 24px;
    }
    .icon-zl_kefu:before {
    	content: "\e902";
    	font-size: 26px;
    }
    .icon-zl_weibo:before {
    	content: "\e903";
    }
    .icon-zl_weixin:before {
    	content: "\e904";
    }
    .icon-zl_zhiding:before {
    	content: "\e905";
    }
    .toolbar{
    	position: fixed;
    	top: 600px;
    	right: 45px;
    	z-index: 999;
    	width: 100px;
    	height: 100%;
    }
    .toolbar ul{
    	color: #fff;
    	overflow: hidden;
    	font-size: 13px;
    	text-align: center;
    	display: block;
    	width: 40px;
    	padding-left: 100px;
    	min-height: 160px;
    }
    .toolbar ul li{
    	cursor: pointer;
    	height: 40px;
    	width: 40px;
    	line-height: 40px;
    	background-color: #000000;
    	position: relative;
    }
    .toolbar ul li:hover span,.toolbar ul li:hover p{
    	background-color: #1468D5;
    }
    .toolbar ul li:hover p{
    	animation: lell linear forwards 0.5s;
    }
    .toolbar ul li.Qrcode:hover p{
    	animation: lells linear forwards 0.5s;
    }
    .toolbar ul li.Phone:hover p{
    	animation: lellc linear forwards 0.5s;
    }
    .toolbar ul li:last-child{
    	margin-top: 8px;
    }
    @keyframes lell{
    	from{left: 40px;}
    	to{left: -60px;}
    }
    @keyframes lells{
    	from{left: 60px;}
    	to{left: -80px;top: -25px;}
    }
    @keyframes lellc{
    	from{left: 60px;}
    	to{left: -100px;}
    }
    .toolbar ul li span{
    	display: block;
    	width: 40px;
    	height: 40px;
    	position: absolute;
    	left: 0;
    	top: 0;
    	z-index: 99;
    	background-color: #000;
    }
    .toolbar ul li p{
    	position: absolute;
    	left: 40px;
    	top: 0;
    	width: 60px;
    	height: 40px;
    	color: #fff;
    	font-size: 13px;
    	text-align: center;
    	background-color: #000;
    	z-index: 90;
    }
    .toolbar ul li p.qrcode{
    	height: 90px;
    	width: 80px;
    	padding-top: 5px;
    	position: absolute;
    	right: 0;
    	top: -25px;
    }
    .toolbar ul li p.qrcode img{
    	width: 70px;
    	height: 70px;
    }
    .toolbar ul li p.qrcode a{
    	font-size: 12px;
    	display: block;
    	line-height: 18px;
    	color: #fff;
    	text-decoration: none;
    }
    .return{
    	display: none;
    }
    .hide{
    	display: none;
    }
    .block{
    	display: block;
    }
    .col3{
    	color: #333333;
    }