萌系返回顶部
一款创新且富有情感化交互设计的小功能，专为提升用户体验而精心打造。该功能会在用户浏览网页内容并向下滚动至预设阈值高度时，在网页右下角自动显现一个生动可爱的小人图标。这一设计旨在吸引用户的注意力，并提供返回页面顶部功能。
当用户点击小人图标时，页面会回到顶部，从而避免了长篇幅内容浏览过程中的繁琐手动操作。通过结合精致的视觉表现与流畅的JavaScript动画技术，该组件不仅强化了网页的实用功能，还为整体界面增添了亲和力与个性化特色，使其成为优化用户导航体验的重要亮点之一。
操作步骤
1、初始化HTML基础框架
使用!DOCTYPE html声明文档类型，并通过html:5的快捷代码创建HTML5的基础结，然后设置语言和标题。
<!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>萌系返回顶部</title> </head> <body> </body> </html>
2、准备好js框架结构
// 等待文档加载完成后再执行脚本
document.addEventListener("DOMContentLoaded", function () {
// 监听窗口滚动事件
window.addEventListener("scroll", function () {
});
//点击图片后执行脚本
goTop.addEventListener("click", function (event) {
});
});3、把图片显示出来
在body内添加代码
<div class="go-top"> <img src="reimu.png" title="要回到上边么？"> </div>
4、把图片位置固定到右下角
添加css代码
.go-top{
position: fixed;
right: 0;
bottom: 0;
}5、添加滚动条下拉
在图片上方添加一个空的div层
<div class="bg"></div>
给这个div设置高度
.bg{
height: 3000px;
}6、打开页面，图片默认隐藏
通过js控制默认隐藏图片，在"等待文档加载完成后再执行脚本"函数内，输入js代码
const goTop = document.querySelector('.go-top');
goTop.style.display = 'none';7、下拉滚动，判断图片是否显示
在“监听窗口滚动事件”函数内添加代码
// 获取当前窗口的垂直滚动位置
const scrollTop = window.scrollY;
// 判断滚动位置是否超过文档元素（浏览器视口高度）
if (scrollTop > document.documentElement.clientHeight) {
// 如果滚动位置超过视口高度，则显示回到顶部按钮
goTop.style.display = 'block';
} else {
// 否则，隐藏回到顶部按钮
goTop.style.display = 'none';
}8、图片添加动画
让图片动起来，透明度从0到1，添加时间间隔。代码写到“goTop.style.display = 'block';”的下面。
goTop.style.opacity = "0";
goTop.style.transition = 'opacity 1s';
setTimeout(function(){
goTop.style.opacity = "1";
},1000)9、对动画执行条件进行判断
当图片处于显示状态的时候，滚动条满足现在条件的情况下不重复执行动画
if (goTop.style.display == 'none') {
//图片显示的代码
}10、添加点击图片返回顶部的操作
在"点击图片后执行脚本"函数内，输入js代码
window.scrollTo(0, 0);
11、完
效果演示
文档如有描述不清楚、错误或者过时的地方，欢迎留言指出。
文档、教程内容会不定时更新，转载请标明原帖链接，以免让过时的教程流入网络。
