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


Posted in Javascript onAugust 30, 2013

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

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

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

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

在<head>标签中加入到页面顶部的锚点:

a id="_top"></a>

在<body>的最末尾加入js代码(用div实现):
<script type="text/javascript"> 
function form_top(){ 
document.write('<div id="form_top"><a href="#_top" title="回到顶部"><div class="top_img"></div></a></div>') 
} 
form_top(); 
</script>

设置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 相关文章推荐
javascript 循环读取JSON数据的代码
Jul 17 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
VUE重点问题总结
Mar 19 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
详解Webpack4多页应用打包方案
Jul 16 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
细说javascript函数从函数的构成开始
Aug 29 #Javascript
密码框显示提示文字jquery示例
Aug 29 #Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 #Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 #Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 #Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 #Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 #Javascript
You might like
PHP调用三种数据库的方法(1)
2006/10/09 PHP
PHP 上传文件大小限制
2009/07/05 PHP
php 应用程序安全防范技术研究
2009/09/25 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
JavaScript 指导方针
2007/04/05 Javascript
jquery 批量上传图片实现代码
2010/01/28 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
js实现密码强度检验
2017/01/15 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
后勤采购员岗位职责
2013/12/19 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
演讲稿开场白台词
2014/08/25 职场文书
新教师个人总结
2015/02/06 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
师德承诺书2015
2015/04/28 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
python小程序之飘落的银杏
2021/04/17 Python
Python基于Opencv识别两张相似图片
2021/04/25 Python