移动端返回顶部
文章目录
- 一、案例分析
- 二、代码实现
- 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>Documenttitle><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);}}
})
三、运行结果
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！