返回页面顶部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 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
JS+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
详解TypeScript中的类型保护
Apr 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
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
php实现对象克隆的方法
2015/06/20 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
php无限极分类实现方法分析
2019/07/04 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
Python生成验证码实例
2014/08/21 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
Python函数调用追踪实现代码
2020/11/27 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
计算机科学与技术应届生求职信
2013/11/07 职场文书
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android