返回页面顶部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插件
Nov 24 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
微信小程序 网络通信实现详解
Jul 23 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网站地图生成类示例
2014/01/13 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
script标签的 charset 属性使用说明
2010/12/04 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
javascript常用的方法整理
2015/08/20 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
windows下添加Python环境变量的方法汇总
2018/05/14 Python
python学生信息管理系统(完整版)
2020/04/05 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
几个Linux面试题笔试题
2012/12/01 面试题
个人自荐信
2013/12/05 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
农业开发项目建议书
2014/05/16 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
出国留学单位推荐信
2015/03/26 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
2015年度物流工作总结
2015/04/30 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS