返回页面顶部top按钮通过锚点实现

2014-04-08

　　用户在使用系统时，会有很多表单的操作，然而很多表单都是裹脚布啊，长啊长~

　　所以就需要一个返回页面顶部的top按钮啦~

　　虽然说网上的方法有很多种，但是未免过于繁琐。左一个判断又一个定位，总之，太麻烦啦~前人的代码拿来就用有时候是节约时间，但还是要根据系统的性能来综合考虑，为了不给浏览器以及服务器带来不必要的压力，我还是决定自己写一个top按钮~

　　在<head>标签中加入到页面顶部的锚点：

　　在<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样式。

本文关键词：按钮顶部页面

上一篇：基于jquery的回到页面顶部按钮
下一篇：纯文字版返回顶端的js代码