讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

返回页面顶部top按钮通过锚点实现(自写)_javascript技巧

php中文网
发布： 2016-05-16 17:23:49
原创
1370人浏览过

实现了我的小跳槽以后，从8月7号入职了现在的这家公司，我好像是加入了救火队的行列，还没有开始开发新的模块，只是一直在实现已经上线模块中的新需求，有时候也真想问问，某些用户的脑子是不是进水了，提出来的需求只想让人大笑三声。。。幸好项目组做需求的姐姐工作经验十分丰富，能够很好地和用户协调，让我们这些开发人员也没那么辛苦~

用户在使用系统时，会有很多表单的操作，然而很多表单都是裹脚布啊，长啊长~

所以就需要一个返回页面顶部的top按钮啦~

虽然说网上的方法有很多种，但是未免过于繁琐。左一个判断又一个定位，总之，太麻烦啦~前人的代码拿来就用有时候是节约时间，但还是要根据系统的性能来综合考虑，为了不给浏览器以及服务器带来不必要的压力，我还是决定自己写一个top按钮~

在

零一万物开放平台
零一万物开放平台

零一万物大模型开放平台

零一万物开放平台 48
查看详情 零一万物开放平台
标签中加入到页面顶部的锚点：
复制代码 代码如下:

a id="_top">

在的最末尾加入js代码（用div实现）：
复制代码 代码如下:

')
}
form_top();


设置top按钮的css样式（让div始终在页面右下角）：
复制代码 代码如下:

#form_top{display:block; bottom:3px; right:3px; position:fixed;}
.top_img{
background-image: url("img/top.png");
width: 40px;
height:40px;
cursor: pointer;
}

最后，别忘了在jsp页面中引入css样式。

效果图：
返回页面顶部top按钮通过锚点实现(自写)_javascript技巧

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：jQuery动态添加删除select项(实现代码)_jquery 下一篇：js Math 对象的方法_基础知识
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
javascript如何实现浏览器指纹识别_有哪些常用技术？ 浏览器指纹识别通过组合Canvas、WebGL、navigator属性、时区和屏幕信息等5–7个稳定字段哈希生成，非隐私模式下识别率超90%，但需遵守GDPR/CCPA合规要求。
2025-12-23 17:12:09
177
javascript的柯里化是什么_它如何实现函数转换？ 柯里化是将多参数函数转换为单参数函数链的过程，通过闭包保存已传参数，待参数数量满足时执行原函数；其核心是延迟求值与部分参数固定，区别于可多参数传入的偏函数。
2025-12-23 17:10:02
234
javascript如何实现截图功能_怎样将网页保存为图片？ JavaScript无法直接调用系统截图API，但可通过html2canvas或dom-to-image库将DOM渲染为图片，或借助Puppeteer等服务端工具实现高质量截图。
2025-12-23 17:07:02
693
javascript的Babel是什么_如何转换新版本代码？ Babel是将新标准JavaScript代码（如ES2015+、TypeScript、JSX）转换为向后兼容版本（如ES5）的编译器，通过解析→转换→生成三步基于AST实现精准降级，解决浏览器环境对新语法支持滞后的问题。
2025-12-23 16:49:17
434
javascript JSON是什么_如何解析和序列化JSON数据 JSON是字符串而非对象，需用JSON.parse()解析、JSON.stringify()生成；键名必须双引号，不支持单引号、undefined、函数等；格式错误会直接报错。
2025-12-23 16:48:43
452
javascript怎样操作蓝牙设备？_javascript的Web Bluetooth API如何使用？ WebBluetoothAPI允许HTTPS或localhost环境下通过用户交互调用requestDevice()、connect()、getPrimaryService()、readValue()等异步方法与BLE设备通信，Chrome/Edge/Opera支持，Safari/Firefox不支持。
2025-12-23 16:46:15
693
javascript如何实现自动化测试_怎样用Selenium控制浏览器 最常用方式是结合SeleniumWebDriver与Node.js生态，或更推荐Playwright；Playwright开箱即用、多浏览器支持、自动等待；Selenium需手动管理驱动；定位优先用data-testid，避免固定等待，测试应独立可重复。
2025-12-23 16:45:18
436
javascript如何实现代码格式化_工具如Prettier如何配置？ Prettier是主流JavaScript代码格式化工具，开箱即用且支持精细配置；推荐项目本地安装，通过配置文件（如.prettierrc.js）或命令行统一风格，并与ESLint协同实现质量与格式双修复。
2025-12-23 16:37:02
542
javascript如何操作蓝牙_Web Bluetooth API有哪些实际应用场景？ JavaScript可通过WebBluetoothAPI在支持浏览器中直接连接BLE设备，适用于工业传感、医疗监测、教育开发及门禁验证等场景，需HTTPS、用户触发、设备广播指定服务且仅限Chrome/Edge支持。
2025-12-23 16:23:02
163
javascript的模块化是什么_如何使用import和export？ JavaScript模块化通过export和import实现代码拆分与依赖管理，支持命名导出、默认导出及混合导入，需注意顶层导入、路径规范、环境配置（如type="module"）及常见误区。
2025-12-23 16:21:30
440
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部