效果（后面有源码）：
这是一个很简单的页面置顶按钮，点击后页面置顶。
视频制作过程：
【html+css+js】页面缓慢置顶效果制作
实现：
1.定义标签，.bg是背景图，.zd是置顶按钮：
<div class="bg"></div>
<div class="zd"></div>
2. 置顶按钮基本css样式：
.zd{
position: fixed;
bottom: 50px;
right: -55px;
width: 50px;
height: 50px;
background-color: rgba(19, 117, 182,.8);
border-radius: 10px;
text-align: center;
line-height: 50px;
font-size: 25px;
color: aliceblue;
cursor: pointer;
user-select: none;
transition: all 0.5s;
}
.zd:hover{
color: rgb(35, 187, 15);
}
position: fixed;
bottom: 50px;
right: -55px;
width: 50px;
height: 50px; 定位在屏幕右下角，在屏幕外，大小为50*50。
border-radius: 10px; 角度。
text-align: center; 文本居中。
user-select: none; 文本不可选中。
transition: all 0.5s; 过渡效果。
3. js部分，页面滚动：
/* 获取元素*/
var zd = document.querySelector(".zd");
/* 点击事件*/
zd.addEventListener('click',function(){
/* 定时器，缓慢置顶*/
var time = setInterval(function(){
/* top为距离页面顶部距离*/
let top = pageYOffset;
/* 每次走的距离*/
let step = Math.ceil(top/50);
/* 滚动位置*/
window.scroll(0,top-step);
/* 到达顶部清除定时器*/
if(top==0){
clearInterval(time);
}
})
},30)
4. 按钮消失与隐藏：
/* 绑定页面scroll滚动事件*/
window.addEventListener('scroll',function(){
/* 当有滚动*/
if(document.documentElement.scrollTop>0){
/* 定义在屏幕内*/
zd.style.right = 5 + 'px';
}else{
/* 定义在屏幕外*/
zd.style.right = -55 + 'px';
}
})
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?wr5es');
src: url('fonts/icomoon.eot?wr5es#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?wr5es') format('truetype'),
url('fonts/icomoon.woff?wr5es') format('woff'),
url('fonts/icomoon.svg?wr5es#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
*{
font-family: 'icomoon';
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* body{
height: 500vh;
} */
.bg{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(img/11.jpg);
background-size: cover;
z-index: -10;
}
.zd{
position: fixed;
bottom: 50px;
right: -55px;
width: 50px;
height: 50px;
background-color: rgba(19, 117, 182,.8);
border-radius: 10px;
text-align: center;
line-height: 50px;
font-size: 25px;
color: aliceblue;
cursor: pointer;
user-select: none;
transition: all 0.5s;
}
.zd:hover{
color: rgb(35, 187, 15);
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="zd"></div>
<div style="width: 500px; height: 500px; background-color: rgb(118, 33, 129);"></div>
<div style="width: 500px; height: 500px; background-color: rgb(36, 129, 33);"></div>
<div style="width: 500px; height: 500px; background-color: rgb(118, 33, 129);"></div>
<div style="width: 500px; height: 500px; background-color: rgb(129, 107, 33);"></div>
<div style="width: 500px; height: 500px; background-color: rgb(129, 33, 33);"></div>
<div style="width: 500px; height: 500px; background-color: rgb(197, 146, 204);"></div>
<div style="width: 500px; height: 500px; background-color: rgb(41, 129, 33);"></div>
<script>
var zd = document.querySelector(".zd");
zd.addEventListener('click',function(){
var time = setInterval(function(){
let top = pageYOffset;
let step = Math.ceil(top/50);
window.scroll(0,top-step);
if(top==0){
clearInterval(time);
}
})
},30)
window.addEventListener('scroll',function(){
if(document.documentElement.scrollTop>0){
zd.style.right = 5 + 'px';
}else{
zd.style.right = -55 + 'px';
}
})
</script>
</body>
</html>
总结：
其它文章：
炫彩流光文字 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等