网站地图    收藏   

主页 > 前端 > css教程 >

返回页面顶部top按钮 - html/css语言栏目:html.css

来源:自学PHP网    时间:2015-04-14 14:51 作者: 阅读:

[导读] 实现了我的小跳槽以后,从8月7号入职了现在的这家公司,我好像是加入了救火队的行列,还没有开始开发新的模块,只是一直在实现已经上线模块中的新需求,有时候也真想问问,某些...

实现了我的小跳槽以后,从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样式。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论