任务一：返回页面顶部
任务要求：
我们在浏览网页时，如果一个页面很长，当浏览到最下面时想要回到顶部，需要一直向上滚动，非常麻烦。这样就可以利用“返回顶部”按钮让页面自动回到顶部。本案例要求实现当滚动条滚动到一定位置时，页面右下角出现“返回顶部”按钮，单击该按钮可以将页面返回顶部。
案例的初始页面效果：
登录成功与失败的页面效果：
任务分析：
编写HTML代码：定义1个<div>标签，作为表单的容器；定义2个<span>标签，用于提示需要输入的内容；定义2个<input>标签，用于输入用户名和密码；定义1个<button>标签作为“登录”按钮。
添加JavaScript代码：为“登录”按钮绑定单击事件，用于单击该按钮时进行Ajax交互，向服务器发送POST方式的请求。
服务器处理请求：创建用于表单验证的服务器，并使用app.post()处理接收到的POST请求，响应JSON数据。
任务实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.6.0.min.js"></script>
<style>
body { height: 1000px; }
#container { width: 600px; background-color: gray; margin: 0 auto; }
nav { height: 200px; background-color: gray; }
article { height: 500px; background-color: burlywood; }
footer { height: 300px; background-color: cadetblue; }
button { position: fixed; right: 30px; bottom: 10px; display: none; }
</style>
</head>
<body>
<div id="container">
<nav></nav>
<article></article>
<footer></footer>
</div>
<button>返回顶部</button>
<script>
// 控制返回顶部按钮的显示和隐藏
var boxTop = $('#container').offset().top;
$(window).scroll(function () {
if ($(document).scrollTop() >= boxTop) {
$('button').fadeIn();
} else {
$('button').fadeOut();
}
});
// 注册单击事件
$('button').click(function () {
$('body,html').stop().animate({
scrollTop: 0
});
});
</script>
</body>
</html>
