The server was changed from Alibaba Cloud to Tencent Cloud. My code had always been hosted on git, but when I moved, I might be anxious. Some of the newly added files were not hosted on git, so they were lost.
But it doesn't matter, you can rewrite it.
The back to top feature of the previous blog was written by a former front-end colleague, this time I plan to try it myself.
Back to the top is nothing more than an anchor point.
The first version:
<body style="height:2000px;">
<div id="topAnchor"></div>
<a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到顶部</a>
</body>
This is useless js, just tried it with anchors, and it works.
Easy to use is easy to use, but the user experience is not very good. Swish to return to the top. not good.
I don't like to use jquery very much. I like to use it natively no matter what I sit in. So, I wrote an animation with native JavaScript here, and that's probably the case.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>返回顶部</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
height: 2000px;
width: 100%;
}
.to_top{
width: 60px;
height: 60px;
bottom: 10%;
right: 20px;
font-size: 40px;
line-height: 70px;
border: none;
background: rgba(0,0,0,0.2);
cursor: pointer;
opacity: 0;
transition: all 1s;
/*使点前标签始终置于最上层*/
position: fixed;
z-index: 99999;
}
</style>
</head>
<body>
<div class="to_top">
<img src="https://guanchao.site/uploads/gotop/timg.jpg" alt="" width="70;">
</div>
<script type="text/javascript">
window.onscroll = function(){
var timer = null;//时间标识符
var isTop = true;
var obtn = document.getElementsByClassName('to_top')[0];
obtn.onclick = function(){
// 设置定时器
timer = setInterval(function(){
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
//减小的速度
var isSpeed = Math.floor(-osTop/6);
document.documentElement.scrollTop = document.body.scrollTop = osTop+isSpeed;
//判断，然后清除定时器
if (osTop == 0) {
clearInterval(timer);
}
isTop = true;//添加在obtn.onclick事件的timer中
},30);
};
//获取页面的可视窗口高度
var client_height = document.documentElement.clientHeight || document.body.clientHeight;
//在滚动的时候增加判断,忘了的话很容易出错
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if (osTop >= client_height) {
obtn.style.opacity = '1';
}else{
obtn.style.opacity = '0';
}
if(!isTop){
clearInterval(timer);
}
isTop = false;
}
</script>
</body>
</html>
The above code can be put into the html file and run directly.
The specific meaning of the code basically contains comments.
If you don’t understand, please Baidu by yourself.
Have a good suggestion, please enter your comment below.
Welcome to personal blog
https://guanchao.site
Welcome to the Mini Program:
