返回页面顶部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字典探测用户名工具
Oct 05 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
Oct 20 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
Feb 16 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
Element实现动态表格的示例代码
Aug 02 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
德劲1104的电路分析与改良
2021/03/01 无线电
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
使javascript也能包含文件
2006/10/26 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
python获取目录下所有文件的方法
2015/06/01 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
Python基本语法经典教程
2016/03/11 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
python dataframe NaN处理方式
2019/12/26 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
python之随机数函数的实现示例
2020/12/30 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
机械专业毕业生推荐信范文
2013/11/25 职场文书
领导证婚人证婚词
2014/01/13 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
护理专业自我评价
2015/03/11 职场文书
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js