返回页面顶部top按钮通过锚点实现(自写)
更新时间：2013年08月30日 15:01:22 作者：
用户在使用系统时，会有很多表单的操作然而很多表单就会很长,所以就需要一个返回页面顶部的top按钮啦，于是自己写了一个，喜欢的朋友可以参考下
实现了我的小跳槽以后，从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按钮啦~
虽然说网上的方法有很多种，但是未免过于繁琐。左一个判断又一个定位，总之，太麻烦啦~前人的代码拿来就用有时候是节约时间，但还是要根据系统的性能来综合考虑，为了不给浏览器以及服务器带来不必要的压力，我还是决定自己写一个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样式。
效果图：
相关文章
这篇文章主要介绍了JS实现图片产生波纹一样flash效果的方法,通过递归调用自定义函数f_wave实现波纹效果,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要为大家详细介绍了Bootstrap表单布局样式源代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
引用类型是一种数据结构，用于将数据和功能组织在一起。这篇文章主要介绍了JavaScript入门教程之引用类型的相关资料，需要的朋友一起学习吧2016-05-05
这篇文章主要给大家介绍了关于JavaScript实现字符串转JSON对象的4种方法,使用ajax的开发项目过程中,经常需要将json格式的字符串返回到前端,前端解析成js对象(JSON),需要的朋友可以参考下2023-10-10
有时候我们需要使用a这个超级链接，而又不使用href来完成跳转，针对这个问题，可以采用下面的解决方案2014-04-04
这篇文章主要为大家详细介绍了js实现简单日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了js实现最短的XML格式化工具,实例分析了基于jquery-latest.js实现XML代码格式化的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
JS中数组随机排序实现方法(原地算法sort/shuffle算法)
已经学过JavaScript,我们当然就可以用数组的排序方法,这篇文章主要给大家介绍了关于JS中数组随机排序实现方法的相关资料,主要包括了原地算法sort/shuffle算法,需要的朋友可以参考下2023-02-02
本文给大家分享一段js实例代码实现时钟滴答声效果，效果逼真，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-01-01
删除属性有很多方法,学到了就在这里记录一下,下面这篇文章主要给大家介绍了关于js删除对象属性的多种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
最新评论