文章目录
一、案例分析二、代码实现1.HTML 文档2.CSS 文档3.JS 文档 三、运行结果一、案例分析
① 头部搜索栏固定定位，这样滚动时不会将搜索栏也卷进去，并将z-index 层级设为最大；
② 同 PC 端页面滚动一样，给 window 添加滚动事件；
③ 先将 goback 的 display 设为 none 隐藏起来，当 window.pageYOffset 大于1000时，显示返回顶部模块，小于1000则隐藏；
④ 点击返回顶部，页面就滚动到最开始的位置，我们可以 scroll(0, 0)，但是页面立马跳回原处会显得十分突兀，降低了用户体验；
⑤ 对此，我们添加动画函数实现缓动效果，使页面相对缓慢地返回到最顶端。
二、代码实现
1.HTML 文档
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="返回顶部.css" rel="stylesheet"/><script src="返回顶部.js"></script></head><body><div class="head"><input type="text" class="search" placeholder=" 搜索"/><div class="user"><a href="javascript:;">我的</a></div></div><div class="content"><ul class="picture"><li><a href="javascript:;"><img src="picture//图1.jpg"/></a></li><li><a href="javascript:;"><img src="picture//图2.jpg"/></a></li><li><a href="javascript:;"><img src="picture//图3.jpg"/></a></li><li><a href="javascript:;"><img src="picture//图4.jpg"/></a></li><li><a href="javascript:;"><img src="picture//图5.jpg"/></a></li><li><a href="javascript:;"><img src="picture//图6.jpg"/></a></li></ul></div><span class="goback"><img src="picture//顶部.png"/></span></body></html>
2.CSS 文档
* {margin: 0;padding: 0;}.head {position: fixed;width: 100%;height: 52px;top: 0;background-color: aliceblue;z-index: 999;}.search {position: absolute;width: 80%;height: 32px;margin: 10px;border: 1px solid #ccc;}.user {position: absolute;width: 42px;height: 42px;right: 10px;margin: 5px auto;}.head a {display: inline-block;width: 42px;height: 42px;text-decoration: none;font-size: 10px;text-align: center;line-height: 42px;color: aliceblue;border-radius: 50%;background-color: rgb(107, 107, 230);}.content {position: relative;width: 100%;height: 2400px;margin: 52px auto;overflow: hidden;}.picture {width: 100%;height: 2400px;}.picture img {width: 100%;height: 400px;}.goback {display: none;position: fixed;bottom: 50px;right: 10px;width: 30px;height: 30px;border-radius: 50%;border: 2px solid #ccc;overflow: hidden;padding: 8px;background-color: aliceblue;}.goback img {width: 30px;height: 30px;}
3.JS 文档
window.addEventListener('load', function() {var content = document.querySelector('.content');var goback = document.querySelector('.goback');window.addEventListener('scroll', function() {if (window.pageYOffset > 1000) {goback.style.display = 'block';} else {goback.style.display = 'none';}})goback.addEventListener('click', function() {animate(window, 0);})function animate(obj, target, callback) {clearInterval(obj.timer); obj.timer = setInterval(fn, 13);function fn() {var step = (target - window.pageYOffset) / 5;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (window.pageYOffset == target) {clearInterval(obj.timer);if (callback) {callback();}}window.scroll(0, window.pageYOffset + step);}}})
