Le serveur est passé d'Alibaba Cloud à Tencent Cloud. Mon code avait toujours été hébergé sur git, mais lorsque je déménageais, je serais peut-être anxieux. Certains des fichiers nouvellement ajoutés n'étaient pas hébergés sur git, ils étaient donc perdus.
Mais ce n'est pas grave, vous pouvez le réécrire.
La fonction de retour en haut du blog précédent a été écrite par un ancien collègue front-end, cette fois, je prévois de l'essayer moi-même.
Revenir en haut n'est rien de plus qu'un point d'ancrage.
La première version:
<body style="height:2000px;">
<div id="topAnchor"></div>
<a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到顶部</a>
</body>
C'est js inutile, je viens de l'essayer avec des ancres, et ça marche.
Facile à utiliser est facile à utiliser, mais l'expérience utilisateur n'est pas très bonne. Swish pour revenir au sommet. pas bon.
Je n'aime pas beaucoup utiliser jquery. J'aime l'utiliser en natif, peu importe ce dans quoi je suis assis. J'ai donc écrit une animation avec JavaScript natif ici, ce qui est probablement le cas.
<!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>
Le code ci-dessus peut être placé dans le fichier html et exécuté directement.
La signification spécifique du code contient essentiellement des commentaires.
Si vous ne comprenez pas, veuillez Baidu par vous-même.
Ayez une bonne suggestion, veuillez entrer votre commentaire ci-dessous.
Bienvenue sur le blog personnel
https://guanchao.site
Bienvenue dans le mini programme:
