返回页面顶部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 相关文章推荐
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
jquery easyui的tabs使用时的问题
Mar 23 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 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
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
javascript深入理解js闭包
2010/07/03 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
使用python进行拆分大文件的方法
2018/12/10 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
会计电算化专业应届大学生求职信
2013/10/22 职场文书
违反学校规定检讨书
2014/01/18 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
加入学生会演讲稿
2014/04/24 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
安全承诺书
2015/01/19 职场文书
医院病假条范文
2015/08/17 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android