“返回顶部”按钮效果
pc端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>返回顶部</title>
<style>
.wrapper {
width: 1150px;
height: 3582px;
border: 2px solid black;
}
.back_top {
width: 37px;
height: 42px;
position: fixed;
right: 50%;
margin-right: -540px;
bottom: 66px;
overflow: hidden;
}
.up-to-top {
display: block;
width: 39px;
height: 42px;
background: url('./img/top.png') no-repeat;
background-position: -20px -257px;
opacity: 0.5;
}
.up-to-top:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="wrapper"></div>
<div class="back_top" id="btn">
<a href="javascript:;" class="up-to-top">
</a>
</div>
<script>
window.onload = function() {
var obtn = document.getElementById('btn');
var timer = null;
var isTop = true;
//获取页面的可视窗口高度
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
//滚动条滚动时触发
window.onscroll = function() {
//在滚动的时候增加判断
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if (osTop >= clientHeight) {
obtn.style.display = 'block';
} else {
obtn.style.display = 'none';
}
if (!isTop) {
clearInterval(timer);
}
isTop = false;
};
btn.onclick = function() {
//设置定时器
timer = setInterval(function() {
//获取滚动条距离顶部的高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop; //同时兼容了ie和Chrome浏览器
//减小的速度
var isSpeed = Math.floor(-osTop / 6);
document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;
//console.log( osTop + isSpeed);
isTop = true;
//判断，然后清除定时器
if (osTop == 0) {
clearInterval(timer);
}
}, 30);
};
}
</script>
</body>
</html>
M移动端：
<script>
$('.backToTop').on('touchend', function () {
var T = $(window).scrollTop();
var t = setInterval(function () {
if (T < 0) {
clearInterval(t);
} else {
T -= 50;
$(window).scrollTop(T);
}
}, 13);
});
</script>
网友评论