返回页面顶部top按钮通过锚点实现(自写)

218 阅读 0 评论 144 点赞

我是靠谱客的博主寒冷毛衣，最近开发中收集的这篇文章主要介绍返回页面顶部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样式。

效果图：