返回页面顶部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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
document.designMode的功能与使用方法介绍
Nov 22 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
vue地区选择组件教程详解
May 04 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 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
浅析is_writable的php实现
2013/06/18 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
JS计算网页停留时间代码
2014/04/28 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
python获取当前计算机cpu数量的方法
2015/04/18 Python
python定向爬取淘宝商品价格
2018/02/27 Python
Python3实现转换Image图片格式
2018/06/21 Python
python散点图实例之随机漫步
2018/08/27 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
酒店经理职责
2014/01/30 职场文书
服装促销活动方案
2014/02/23 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
网络管理员岗位职责
2014/03/17 职场文书
酒店员工培训方案
2014/06/02 职场文书
三严三实对照检查材料
2014/09/22 职场文书
三人合伙协议书范本
2014/10/29 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
实习生辞职信范文
2015/03/02 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
六年级作文之自救
2019/12/19 职场文书
python游戏开发之pygame实现接球小游戏
2022/04/22 Python
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS