文章目录
- 一、移动端返回顶部案例
- [二、代码示例 - 移动端返回顶部案例](#二、代码示例 - 移动端返回顶部案例)
代码下载地址 : https://download.csdn.net/download/han1202012/92520894
参考 【Web APIs】动画案例 - 返回网页顶部 ( 直接跳转到顶部 | 使用动画效果滚动到顶部 ) 博客 , 这是 桌面端浏览器 网页 的 返回顶部案例 ;
一、移动端返回顶部案例
1、需求说明
实现如下需求 :
- 显示按钮 : 滚动网页 , 滚动到 页面距离顶部 500 像素位置时 , 显示 返回顶部按钮 ;
- 返回顶部 : 点击 按钮 直接 返回顶部 位置 ;
2、返回顶部按钮 显示 / 隐藏 设置
返回顶部按钮 显示 / 隐藏 设置 :
给窗口添加 scroll事件监听 , 该事件在页面滚动时持续触发 , 判断 页面垂直滚动距离是否大于等 相对于 顶部偏移量 500 像素 ,
- 满足条件时 , 设置 返回顶部 按钮 为显示状态 ;
- 不满足条件时 , 设置 返回顶部 按钮 为隐藏状态 ;
代码示例 :
javascript
// 返回顶部模块制作
// 通过类选择器获取返回顶部按钮元素 , 赋值给变量goBack
var goBack = document.querySelector('.goBack');
// 返回顶部按钮 显示 / 隐藏 设置 :
// 给窗口添加 scroll事件监听 , 该事件在页面滚动时持续触发
window.addEventListener('scroll', function() {
// 判断页面垂直滚动距离是否大于等 相对于 顶部偏移量 500 像素
if (window.pageYOffset >= 500) {
// 满足条件时 , 设置返回顶部按钮为显示状态
goBack.style.display = 'block';
} else {
// 不满足条件时 , 设置返回顶部按钮为隐藏状态
goBack.style.display = 'none';
}
});3、返回顶部操作
给 返回顶部 按钮 添加 click 事件监听 , 该事件在按钮被点击时触发 ,
调用 window.scroll() 方法 , 将页面滚动到 x=0、y=0 的位置 ;
代码示例 :
javascript
// 给返回顶部按钮添加 click 事件监听 , 该事件在按钮被点击时触发
// click 有 300 ms 的延迟问题
goBack.addEventListener('click', function() {
// 调用 window.scroll()方 法 , 将页面滚动到 x=0、y=0 的位置 ( 即页面顶部 )
window.scroll(0, 0);
});二、代码示例 - 移动端返回顶部案例
1、代码示例
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 引入 css 初始化文件 -->
<link rel="stylesheet" href="css/normalize.css">
<!-- 引入 css 文件 -->
<link rel="stylesheet" href="css/index.css">
<!-- 引入 js 文件 -->
<script src="js/index.js"></script>
<title>移动端返回顶部</title>
<style>
body {
/* 定义页面全局基础容器 ( body 标签 ) 的样式 */
/* 限制页面最大宽度为540px , 适配大屏手机 , 防止页面过宽导致布局变形 */
max-width: 540px;
/* 限制页面最小宽度为320px , 适配小屏手机 , 保证核心内容不会被挤压无法显示 */
min-width: 320px;
/* 给body设置1200px高度 , 撑开页面布局 , 便于查看轮播效果 , 避免高度塌陷 */
height: 1200px;
/* 设置页背景图片 */
background: url(image/1.png) no-repeat;
/* 隐藏水平方向溢出的内容 , 防止出现水平滚动条 , 保证移动端布局整洁 */
overflow-x: hidden;
}
.goBack {
/* 定义返回顶部/返回上一页按钮的样式类 */
/* 默认隐藏该按钮，通常需通过 JavaScript 监听页面滚动后控制显示 */
display: none;
/* 设置按钮为固定定位，位置始终相对于浏览器窗口，不随页面滚动改变 */
position: fixed;
/* 设置按钮与浏览器窗口底部的间距为 50 像素 */
bottom: 50px;
/* 设置按钮与浏览器窗口右侧的间距为 20 像素 */
right: 20px;
/* 设置按钮的宽度为 38 像素 */
width: 38px;
/* 设置按钮的高度为 38 像素 */
height: 38px;
/* 为按钮设置背景图片（路径为image/back.png），并设置背景图片不重复显示 */
background: url(image/back.png) no-repeat;
/* 设置背景图片的尺寸为38x38像素，与按钮自身尺寸匹配，保证图片完整无变形 */
background-size: 38px 38px;
}
</style>
<script>
// 监听整个窗口的load事件 , 页面所有资源 ( DOM、图片等 ) 加载完成后执行内部逻辑 , 避免DOM未加载完成获取不到元素
window.addEventListener('load', function() {
// 返回顶部模块制作
// 通过类选择器获取返回顶部按钮元素 , 赋值给变量goBack
var goBack = document.querySelector('.goBack');
// 返回顶部按钮 显示 / 隐藏 设置 :
// 给窗口添加 scroll事件监听 , 该事件在页面滚动时持续触发
window.addEventListener('scroll', function() {
// 判断页面垂直滚动距离是否大于等 相对于 顶部偏移量 500 像素
if (window.pageYOffset >= 500) {
// 满足条件时 , 设置返回顶部按钮为显示状态
goBack.style.display = 'block';
} else {
// 不满足条件时 , 设置返回顶部按钮为隐藏状态
goBack.style.display = 'none';
}
});
// 给返回顶部按钮添加 click 事件监听 , 该事件在按钮被点击时触发
// click 有 300 ms 的延迟问题
goBack.addEventListener('click', function() {
// 调用 window.scroll()方 法 , 将页面滚动到 x=0、y=0 的位置 ( 即页面顶部 )
window.scroll(0, 0);
});
})
</script>
</head>
<body>
<div class="goBack"></div>
</body>
</html>2、执行结果