返回页面顶部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的图片的切换(以数字的形式)
Feb 14 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jQuery实现日历效果
Sep 11 jQuery
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 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
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
python读取几个G的csv文件方法
2019/01/07 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
How to spawning asynchronous work in J2EE
2016/08/29 面试题
《草虫的村落》教学反思
2014/02/16 职场文书
技术总监管理职责范本
2014/03/06 职场文书
树转促学习心得体会
2014/09/10 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
先进工作者事迹材料
2014/12/23 职场文书
病危通知单
2015/04/17 职场文书
英语投诉信范文
2015/07/03 职场文书
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android