Effect (source code at the back):
This is a very simple page top button, click it to top the page.
Video production process:
[Html+css+js] Slow page top effect production
achieve:
1. Define the label, .bg is the background image, .zd is the top button:
<div class="bg"></div>
<div class="zd"></div>
2. The basic css style of the top button:
.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; Positioned at the bottom right corner of the screen, outside the screen, with a size of 50*50.
border-radius: 10px; angle.
text-align: center; The text is centered.
user-select: none; The text cannot be selected.
transition: all 0.5s; transition effect.
3. js part, page scrolling:
/* 获取元素*/
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. Button disappear and hide:
/* 绑定页面scroll滚动事件*/
window.addEventListener('scroll',function(){
/* 当有滚动*/
if(document.documentElement.scrollTop>0){
/* 定义在屏幕内*/
zd.style.right = 5 + 'px';
}else{
/* 定义在屏幕外*/
zd.style.right = -55 + 'px';
}
})
Complete code:
<!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>
to sum up:
Other articles:
Colorful streamer text html+css
bubble floating background special effect html+css
simple clock special effect html+css+js
cyberpunk style button html+css
imitating NetEase cloud official website carousel image html+css+js
water wave loading animation html+ css
navigation bar scrolling gradient effect html+css+js
book page turning html+css
3D stereo album html+css
neon drawing board effect html+css+js
remember some CSS attribute summary (1)
Sass summary notes
... etc.