返回页面顶部的实现

方式一　

　使用技术：Javascript、CSS、Jquery

　　直接在页面<body></body>中引用backtop.js脚本即可实现页面中返回页面顶部的功能。scroll滚动条距顶部大于100px时显示返回顶部按钮，点击按钮后滚动条返回顶部，按钮消失。

1、页面代码　　 

 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="utf-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head >
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7 <title>返回页面顶部</title>
 8 
 9 <link href="css/style.css" rel="stylesheet" type="text/css" />
10 <script type="text/javascript"   src="js/jquery.js"></script> 
11 
12 </head>
13 <body style="height:1050px;">
14 
15 <script type="text/javascript" src="backtop/js/backtop.js"></script>
16 
17 </body>
18 </html>
View Code

2、CSS样式 

 1 /*  css样式*/
 2 .div_fixed {
 3     position: fixed;
 4     right: 10px;
 5     transition: bottom ease .3s;
 6     bottom: -90px;
 7     z-index: 3;
 8     cursor:pointer;
 9 }
10 .gotop {
11     width: 40px;
12     height: 40px;
13     display: block;
14     background-color: #02a2aa;
15     transition: background-color ease .3s;
16     margin-top: 1px;
17 }
18 
19 .up-icon{
20     float:left;
21     margin:14px 0 0 9px;
22     width:23px;
23     height:12px;
24     background: url(../images/side-icon02.png);
25 }
26 .gotop:hover {
27     background-color:#2c2d2e;
28 }
View Code

3、Javascript  

 1 ***
 2  * Description:scroll滚动条距离窗口顶部大于100px时显示返回顶部按钮，点击按钮后滚动条返回顶部，按钮消失。
 3  * Author     ：J.Y.J
 4  ***/
 5 function backBodyTop(){
 6     this.init();
 7 }
 8 backBodyTop.prototype = {
 9     init: function(){        
10             var $backTop = this.$backTop = $('<div class="div_fixed">'+
11                                                 '<a class="gotop">'+
12                                                     '<span class="up-icon"></span>'+
13                                                 '</a>'+
14                                             '</div>');
15             $('body').append($backTop);
16             
17             $backTop.click(function(){
18             $("html, body").animate({
19             scrollTop: 0
20             }, 100);
21             });
22             
23             $(window).bind("scroll",function() {
24             var d = $(document).scrollTop();
25             100 < d ? $backTop.css("bottom", "10px") : $backTop.css("bottom", "-90px");
26             });
27     }
28 };
29 var backBodyTop = new backBodyTop();
View Code

 源码下载：BackPageTop.zip

 

方式二

　　通过锚点的方式实现。

源码：

 1 <%@ page language="java" contentType="text/html; charset=utf-8"
 2     pageEncoding="utf-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head >
 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7 <title>返回页面顶部</title>
 8 
 9 </head>
10 <body style="height:1050px;" id="_top">
11 
12 <script type="text/javascript"> 
13 function form_top(){ 
14 document.write('<div id="form_top"><a href="#_top" title="回到顶部">回到顶部</a></div>') 
15 } 
16 form_top(); 
17 </script>
18 
19 </body>
20 </html>
View Code

 

posted @ 2014-08-07 13:49  JFire  阅读(163)  评论(0)    收藏  举报