第二节 萌系返回顶部
一、需求分析
这是一款创新且富有情感化交互设计的小功能，专为提升用户体验而精心打造。该功能会在用户浏览网页内容并向下滚动至预设阈值高度时，在网页右下角自动显现一个生动可爱的小人图标。这一设计旨在吸引用户的注意力，并提供一键返回页面顶部的功能。 当用户点击小人图标时，页面会平滑回到顶部，从而避免了长篇幅内容浏览过程中的繁琐手动操作。通过结合精致的视觉表现与流畅的 JavaScript 动画技术，该组件不仅强化了网页的实用功能，还为整体界面增添了亲和力与个性化特色，使其成为优化用户导航体验的重要亮点之一。
二、操作步骤
（一）初始化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>
（二）准备 JavaScript 框架结构
在页面底部或 <head> 中引入 script 标签，并搭建好基础的事件监听框架。
// 等待文档加载完成后再执行脚本
document.addEventListener("DOMContentLoaded", function () {
// 1. 监听窗口滚动事件
window.addEventListener("scroll", function () {
// 滚动时的逻辑将写在这里
});
// 2. 点击图片后执行脚本
// 注意：goTop 变量将在后续步骤中定义
// goTop.addEventListener("click", function (event) { ... });
});
（三）把图片显示出来
在 <body> 内添加返回顶部的容器和图片代码。
<div class="go-top">
<img src="reimu.png" title="要回到上边么？" alt="返回顶部">
</div>
（四）把图片位置固定到右下角
添加 CSS 样式代码，利用固定定位（fixed）将图标锁定在屏幕右下角。
.go-top {
position: fixed;
right: 0;
bottom: 0;
cursor: pointer; /* 增加鼠标悬停手型提示 */
}
（五）添加滚动条下拉测试层
为了能在页面中产生滚动条以测试功能，在图片上方添加一个空的 div 层，并利用 CSS 撑开页面的高度。
<div class="bg"></div>
给这个div设置高度
.bg {
height: 3000px;
}
（六）初始化：图片默认隐藏
通过 JS 控制默认隐藏图片。在“等待文档加载完成后再执行脚本”函数内部的最前方，输入以下代码获取元素并隐藏。
const goTop = document.querySelector('.go-top');
goTop.style.display = 'none';
（七）下拉滚动，判断图片是否显示
在“监听窗口滚动事件”的函数内部，添加高度判断逻辑。
// 获取当前窗口的垂直滚动位置
const scrollTop = window.scrollY;
// 判断滚动位置是否超过文档元素（浏览器视口高度）
if (scrollTop > document.documentElement.clientHeight) {
// 如果滚动位置超过视口高度，则显示回到顶部按钮
goTop.style.display = 'block';
} else {
// 否则，隐藏回到顶部按钮
goTop.style.display = 'none';
}
（八）为图片显示添加淡入动画
为了让图片出现时不那么生硬，给它添加透明度从 0 到 1 的过渡动画。将以下代码替换到第七步中 goTop.style.display = 'block'; 的下方。
goTop.style.opacity = "0";
goTop.style.transition = 'opacity 1s';
setTimeout(function(){
goTop.style.opacity = "1";
}, 10); // 极短的延迟以确保 CSS 渲染过渡效果
（九）优化动画执行条件
为防止在滚动过程中不断重复触发动画，我们需要在显示图片前加一个条件判断：只有当图片当前是隐藏状态时，才执行显示和动画代码。 优化后的滚动判断逻辑如下：
if (scrollTop > document.documentElement.clientHeight) {
// 只有在隐藏状态下才执行显示，避免重复渲染动画
if (goTop.style.display === 'none') {
goTop.style.display = 'block';
goTop.style.opacity = "0";
goTop.style.transition = 'opacity 1s';
setTimeout(function(){
goTop.style.opacity = "1";
}, 10);
}
} else {
goTop.style.display = 'none';
}
（十）添加点击图片返回顶部的操作
为图标绑定点击事件。在框架结构的点击监听函数内，输入 JS 代码实现一键置顶。
goTop.addEventListener("click", function (event) {
window.scrollTo({
top: 0,
behavior: 'smooth' // 增加平滑滚动效果
});
});