返回页面顶部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 相关文章推荐
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
jqgrid 简单学习笔记
May 03 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
javascript如何创建对象
Aug 29 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 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
相对路径转化成绝对路径
2007/04/10 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
小程序实现搜索框
2020/06/19 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
Python实现的端口扫描功能示例
2018/04/08 Python
学python安装的软件总结
2019/10/12 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
Python实现名片管理系统
2020/02/14 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
村委会主任先进事迹
2014/01/15 职场文书
最新创业融资计划书
2014/01/19 职场文书
网上开商店的创业计划书
2014/01/19 职场文书
火车的故事教学反思
2014/02/11 职场文书
新学期决心书
2014/03/11 职场文书
南京青奥会口号
2014/06/12 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
教师调动申请报告
2015/05/18 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js