返回页面顶部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解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
Javascript验证方法大全
Sep 21 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 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
建立动态的WML站点(一)
2006/10/09 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
Python入门篇之条件、循环
2014/10/17 Python
浅析Python中的多条件排序实现
2016/06/07 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
opencv python图像梯度实例详解
2020/02/04 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
django form和field具体方法和属性说明
2020/07/09 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
高三毕业典礼演讲稿
2014/05/13 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
高中生物教学反思
2016/02/20 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
POST提交数据常见的四种方式
2022/01/18 HTML / CSS
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android
Django框架中模型的用法
2022/06/10 Python