js+JQuery实现返回顶部功能

ArvinStudy

于 2013-03-07 16:16:10 发布

阅读量787

点赞数

分类专栏： jQuery javascript

jQuery 同时被 2 个专栏收录

68 篇文章 0 订阅

订阅专栏

javascript

68 篇文章 0 订阅

订阅专栏

来自：http://www.cnblogs.com/yukaizhao/archive/2012/12/02/js-go-top-function.html#2605234

很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现返回顶部按钮。

首先需要在顶部添加如下html元素：

< p id = "back-to-top" >< a href = "#top" >< span ></ span >返回顶部</ a ></ p >

其中a标签指向锚点top，可以在顶部防止一个<a name="top"></a>的锚点，这样在浏览器不支持js时也可以实现返回顶部的效果了。

要想让返回顶部的图片显示在右侧，还需要一些css样式，如下：

 
          /*returnTop*/ 
         
          p 
          #bac 
          k-to- 
          top 
          { 
         
          position 
          : 
          fixed 
          ; 
         
          display 
          : 
          none 
          ; 
         
          bottom 
          : 
          100px 
          ; 
         
          right 
          : 
          80px 
          ; 
         
          } 
         
          p 
          #bac 
          k-to- 
          top  
          a{ 
         
          text-align 
          : 
          center 
          ; 
         
          text-decoration 
          : 
          none 
          ; 
         
          color 
          : 
          #d1d1d1 
          ; 
         
          display 
          : 
          block 
          ; 
         
          width 
          : 
          64px 
          ; 
         
          /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/ 
         
          -moz-transition:color 
          1 
          s; 
         
          -webkit-transition:color 
          1 
          s; 
         
          -o-transition:color 
          1 
          s; 
         
          } 
         
          p 
          #bac 
          k-to- 
          top  
          a:hover{ 
         
          color 
          : 
          #979797 
          ; 
         
          } 
         
          p 
          #bac 
          k-to- 
          top  
          a span{ 
         
          background 
          : 
          transparent  
          url 
          (/ 
          static 
          /imgs/sprite.png? 
          1202 
          ) 
          no-repeat  
          -25px  
          -290px 
          ; 
         
          border-radius: 
          6px 
          ; 
         
          display 
          : 
          block 
          ; 
         
          height 
          : 
          64px 
          ; 
         
          width 
          : 
          56px 
          ; 
         
          margin-bottom 
          : 
          5px 
          ; 
         
          /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/ 
         
          -moz-transition:background 
          1 
          s; 
         
          -webkit-transition:background 
          1 
          s; 
         
          -o-transition:background 
          1 
          s; 
         
          } 
         
          #bac 
          k-to- 
          top  
          a:hover span{ 
         
          background 
          : 
          transparent  
          url 
          (/ 
          static 
          /imgs/sprite.png? 
          1202 
          ) 
          no-repeat  
          -25px  
          -290px 
          ; 
         
          }

上面样式中的背景图片是雪碧图，下面提供两个单独的返回顶部图片方便朋友们使用：

go-top-icon2 go-top-light-green go-top-green go-top-yellow

有了html和样式，我们还需要用js控制返回顶部按钮，在页面滚动时渐隐渐现返回顶部按钮。

 
          <script src= 
          "http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js" 
          ></script> 
         
          <script> 
         
          $( 
          function 
          (){ 
         
          //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失 
         
          $( 
          function  
          () { 
         
          $(window).scroll( 
          function 
          (){ 
         
          if  
          ($(window).scrollTop()>100){ 
         
          $( 
          "#back-to-top" 
          ).fadeIn(1500); 
         
          } 
         
          else 
         
          { 
         
          $( 
          "#back-to-top" 
          ).fadeOut(1500); 
         
          } 
         
          }); 
         
          //当点击跳转链接后，回到页面顶部位置 
         
          $( 
          "#back-to-top" 
          ).click( 
          function 
          (){ 
         
          $( 
          'body,html' 
          ).animate({scrollTop:0},1000); 
         
          return  
          false 
          ; 
         
          }); 
         
          }); 
         
          }); 
         
          </script>

这样就可以了，你可以通过下面的地址观看实际的效果:

http://outofmemory.cn/code-snippet/tagged/javascript

注意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图。

我的微博地址是： http://weibo.com/yukaizhao 我会把一些技术心得碎片写到微博中,欢迎关注。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/back-to-top.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            Fun_AddEelement_BackToTop();
            //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
            Fun_back_to_top();
        });
        function Fun_AddEelement_BackToTop() {
            var $container = $('body');
            var htmlText = '<p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>';
            var $detailContainer = $(htmlText).appendTo($container);
        }
        function Fun_back_to_top() {
            $(window).scroll(function () {
                if ($(window).scrollTop() > 100) {
                    $("#back-to-top").fadeIn(1500);
                }
                else {
                    $("#back-to-top").fadeOut(1500);
                }
            });
            //当点击跳转链接后，回到页面顶部位置
            $("#back-to-top").click(function () {
                $('body,html').animate({ scrollTop: 0 }, 1000);
                return false;
            });
        }

</script>
</head>
<body>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>

back-to-top.css

/*returnTop*/

p#back-to-top{

    position:fixed;

    display:none;

    bottom:20px;

    right:80px;

}

p#back-to-top a{

    text-align:center;

    text-decoration:none;

    color:#d1d1d1;

    display:block;

    width:64px;

    /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/

    -moz-transition:color 1s;

    -webkit-transition:color 1s;

    -o-transition:color 1s;

}

p#back-to-top a:hover{

    color:#979797;

}

p#back-to-top a span{

    background:transparent url(/images/back-to-top.png?1202) no-repeat center;
    
    border-radius:6px;
   
    display:block;

    height:64px;

    width:56px;

    margin-bottom:5px;

    /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/

    -moz-transition:background 1s;

    -webkit-transition:background 1s;

    -o-transition:background 1s;

}

#back-to-top a:hover span{

    background:transparent url(/images/back-to-top.png?1202) no-repeat center;

}