返回页面顶部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 相关文章推荐
繁简字转换功能
Jul 19 Javascript
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
js实现百度登录窗口拖拽效果
Mar 19 Javascript
JS实现前端动态分页码代码实例
Jun 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
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
python实现关键词提取的示例讲解
2018/04/28 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Python Lambda函数使用总结详解
2019/12/11 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
师范大学应届生求职信
2013/11/21 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
教师调动申请报告
2015/05/18 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis