当前位置: 首页 > news >正文

如何给网页增加滚动到顶部的功能

若想为网页添加滚动到顶部的功能,可按以下步骤操作:

1. 创建滚动按钮

先在 HTML 里添加一个用于触发滚动的按钮,代码如下:

html

预览

<button id="scrollToTopBtn" title="返回顶部">↑</button>

2. 设计按钮样式

接着使用 CSS 为这个按钮设计样式,让它固定在页面右下角,示例样式如下:

css

#scrollToTopBtn {position: fixed;bottom: 20px;right: 20px;background-color: #007BFF;color: white;border: none;border-radius: 50%;width: 40px;height: 40px;font-size: 20px;cursor: pointer;display: none; /* 默认隐藏按钮 */z-index: 999;
}#scrollToTopBtn:hover {background-color: #0056b3;
}

3. 编写 JavaScript 逻辑

最后用 JavaScript 实现按钮的显示、隐藏以及滚动功能:

javascript

document.addEventListener('DOMContentLoaded', function() {const scrollToTopBtn = document.getElementById('scrollToTopBtn');// 监听滚动事件window.addEventListener('scroll', function() {if (window.scrollY > 300) { // 当页面滚动超过300像素时显示按钮scrollToTopBtn.style.display = 'block';} else {scrollToTopBtn.style.display = 'none';}});// 点击按钮时平滑滚动到顶部scrollToTopBtn.addEventListener('click', function() {window.scrollTo({top: 0,behavior: 'smooth' // 平滑滚动效果});});
});

完整示例

下面是一个整合了上述代码的完整示例:

html

预览

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>滚动到顶部示例</title><style>body {height: 2000px; /* 增加页面高度以便测试滚动 */margin: 0;padding: 20px;font-family: Arial, sans-serif;}#scrollToTopBtn {position: fixed;bottom: 20px;right: 20px;background-color: #007BFF;color: white;border: none;border-radius: 50%;width: 40px;height: 40px;font-size: 20px;cursor: pointer;display: none;z-index: 999;}#scrollToTopBtn:hover {background-color: #0056b3;}</style>
</head>
<body><h1>滚动到顶部示例</h1><p>滚动页面查看效果...</p><button id="scrollToTopBtn" title="返回顶部">↑</button><script>document.addEventListener('DOMContentLoaded', function() {const scrollToTopBtn = document.getElementById('scrollToTopBtn');window.addEventListener('scroll', function() {if (window.scrollY > 300) {scrollToTopBtn.style.display = 'block';} else {scrollToTopBtn.style.display = 'none';}});scrollToTopBtn.addEventListener('click', function() {window.scrollTo({top: 0,behavior: 'smooth'});});});</script>
</body>
</html>

Kindergarten sight words - Kindergarten Sight Words 这个网站就用了这个技术,滚动到页面顶部

http://www.dtcms.com/a/270592.html

相关文章:

  • 【具身智能】本地实时语音识别kaldi在正点原子RK3588上部署
  • Python标准库:时间与随机数全解析
  • python 异步编程事件循环的共享问题
  • 达梦:指定数据文件还原的路径
  • 【Linux | 网络】socket编程 - 使用TCP实现服务端向客户端提供简单的服务
  • Ragas的Prompt Object
  • 大数据在UI前端的应用深化:用户行为模式的挖掘与预测性分析
  • 网络信息安全学习笔记1----------网络信息安全概述
  • 2025年新材料与清洁能源国际会议(IACNMCE 2025)
  • 计算机网络实验——访问H3C网络设备
  • 题解:P13017 [GESP202506 七级] 线图
  • 【机器学习】BeamSearch算法
  • BEV感知2
  • python学习打卡:DAY 24 元组和OS模块
  • 5202年安装TensorFlow纪实
  • 【LeetCode207.课程表】以及变式
  • 暑假算法日记第五天
  • [2025CVPR]Mr. DETR:检测Transformer的多路由指导训练解析
  • Mysql组合索引的update在多种情况下的间隙锁的范围(简单来说)
  • 141-CEEMDAN-VMD-Transformer-BiLSTM-ABKDE多变量区间预测模型!
  • [数学基础] 矩阵的秩及其应用
  • El-Select组件实现模糊查询与失焦赋值
  • 第6章应用题
  • 学术绘图(各种神经网络)
  • 5.注册中心横向对比:Nacos vs Eureka vs Consul —— 深度解析与科学选型指南
  • Microsoft AZ-305 Exam Question
  • Flutter基础(前端教程⑦-Http和卡片)
  • Flutter基础(前端教程⑥-按钮切换)
  • 《重构项目》基于Apollo架构设计的项目重构方案(多种地图、多阶段、多任务、状态机管理)
  • 【教程】在ubuntu安装Edge浏览器