返回页面顶部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 解析多维的Json数据格式
Nov 02 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 Javascript
小程序自定义圆形进度条
Nov 17 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
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
python每次处理固定个数的字符的方法总结
2013/01/29 Python
Python判断两个对象相等的原理
2017/12/12 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
pandas中去除指定字符的实例
2018/05/18 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
多个python文件调用logging模块报错误
2020/02/12 Python
使用Python实现批量ping操作方法
2020/05/06 Python
python ssh 执行shell命令的示例
2020/09/29 Python
python图片合成的示例
2020/11/09 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
偷看我的初中毕业鉴定
2014/01/29 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
《自选商场》教学反思
2014/02/14 职场文书
门市房租房协议书
2014/12/04 职场文书
店长岗位职责
2015/02/11 职场文书
争先创优个人总结
2015/03/04 职场文书
班主任工作总结范文
2015/08/13 职场文书
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA