返回页面顶部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 相关文章推荐
JQuery 获得绝对,相对位置的坐标方法
Feb 09 Javascript
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
jQuery知识点整理
Jan 30 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
vue制作toast组件npm包示例代码
Oct 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
php miniBB中文乱码问题解决方法
2008/11/25 PHP
php中var_export与var_dump的区别分析
2010/08/21 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
python基于phantomjs实现导入图片
2016/05/13 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
python调用外部程序的实操步骤
2019/03/04 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
医学专业个人求职自荐信格式
2013/09/23 职场文书
司机检讨书
2014/02/13 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
工作态度怎么写
2015/06/25 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书