今天下午用了1个多小时的时间，实现了csdn右下方的“返回顶部”效果。难度系数不大，就是在细节上耽误了很长时间，最后效果总算看上去比较接近了。
返回顶部用到了一个自定义的函数animate()，这个函数有三个参数，分别是移动过的对象，移动的目标，以及回调函数。这个函数是实现窗口垂直滚动的。
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var step = (target - pageYOffset) / 10;
step = step > 0 ? Math.ceil(step):Math.floor(step);
if (pageYOffset == target) {
clearInterval(obj.timer);
callback && callback();
}
scrollTo(0, pageYOffset + step);
}, 15);
}
程序实现了以下功能：
1.右下角css使用fixed定位，这样页面上下滚动时，工具栏不动。
2.返回顶部图标初始状态不可见，向下滚动超过500px时，显示，小于500px时，隐藏。
3.鼠标移动到返回顶部图标时，图标变为文字“返回顶部”，
点击页面回到顶端。
4.鼠标移动到耳机图标时，文字变为“客服”；
5.鼠标移动到二维码图标上时，显示两张二维码图片。
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padtop: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
}
ul,li,ol{
list-style: none;
}
.main {
width: 1200px;
margin: 0 auto;
height: 3000px;
}
.toolbar {
position: fixed;
right: 20px;
top: 400px;
width: 40px;
}
.w40 {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #ccc;
margin-top: 10px;
cursor: pointer;
font-size: 12px;
color:#999;
}
.cc {
position: absolute;
display: block;
width: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.w40:hover{
background-color: #eee;
}
.toolbar .qrcode {
position: relative;
}
.subqr{
position: absolute;
left:-290px;
top:0px;
width: 290px;
height: 160px;
z-index:9;
display: none;
background-color: #fff;
border: 1px solid #eee;
box-shadow: -2px 2px 3px #eee;
}
.qrcode:hover .subqr{
display: flex;
justify-content:space-around;
align-items: center;
}
.subqr div{
text-align: center;
}
.subqr img{
width: 100px;
height: 100px;
}
.toolbar .goTop {
display: none;
}
</style>
</head>
<body>
<div class="main">
</div>
<div class="toolbar">
<div class="qrcode w40">
<img src="img/qr.png" alt="" class="cc">
<div class="subqr">
<div><img src="img/qr_wechat.png" alt=""><br>关注公众号</div>
<div><img src="img/qr_app.png" alt=""><br>下载app</div>
</div>
</div>
<div class="service w40">
<img src="img/service.png" alt="" class="cc">
</div>
<div class="goTop w40">
<img src="img/goTop.png" alt="" class="cc">
</div>
</div>
<!--end toolbar-->
<script type="text/javascript">
var main = document.querySelector('.main');
//显示隐藏二维码
var goTop = document.querySelector('.goTop');
document.addEventListener('scroll', function() {
//显示隐藏返回顶部
if (window.pageYOffset >= 500) {
goTop.style.display = 'block';
} else {
goTop.style.display = 'none';
}
})
var service = document.querySelector('.service');
//鼠标移入，图像耳机变成文字“客服”
service .addEventListener('mouseenter',function(){
service .innerHTML="客服";
service .style.paddingLeft='6px';
service .style.paddingTop='12px';
})
service .addEventListener('mouseleave',function(){
service .innerHTML="<img src='img/service.png' alt='' class='cc'>";
service .style.paddingLeft='0';
service .style.paddingTop='0';
})
//鼠标移入，图像变成文字“返回顶部”
goTop.addEventListener('mouseenter',function(){
goTop.innerHTML="返回<br/>顶部";
goTop.style.paddingLeft='6px';
goTop.style.paddingTop='3px';
})
goTop.addEventListener('mouseleave',function(){
goTop.innerHTML="<img src='img/goTop.png' alt='' class='cc'>";
goTop.style.paddingLeft='0';
goTop.style.paddingTop='0';
})
//点击动态返回顶部
goTop.addEventListener('click', function() {
animate(window, 0);
})
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var step = (target - pageYOffset) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (pageYOffset == target) {
clearInterval(obj.timer);
callback && callback();
}
scrollTo(0, pageYOffset + step);
}, 15);
}
</script>
</body>
</html>