点击返回顶部的写法

现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;
}