js+JQuery实现返回顶部功能

js+JQuery实现返回顶部功能

很多网站上都有返回顶部的效果，本文阐述如何使用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 ; }

　　

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

id="iframe_0.4675919730216265" src="https://www.cnblogs.com/show-blocking-image.aspx?url=http%3A%2F%2Foutofmemory.cn%2Fugc%2Fupload%2F00%2F07%2F20121202%2FActions-arrow-up-top-icon.png&maxWidth=1509&origin=http://www.cnblogs.com&iframeId=iframe_0.4675919730216265" frameborder="0" scrolling="no" height="64" style="margin: 0px; padding: 0px; border-style: none; border-width: initial; width: 1509px;">  id="iframe_0.6669036485254765" src="https://www.cnblogs.com/show-blocking-image.aspx?url=http%3A%2F%2Foutofmemory.cn%2Fugc%2Fupload%2F00%2F07%2F20121202%2FGnome-Go-Top-48.png&maxWidth=1509&origin=http://www.cnblogs.com&iframeId=iframe_0.6669036485254765" frameborder="0" scrolling="no" height="48" style="margin: 0px; padding: 0px; border-style: none; border-width: initial; width: 1509px;"> id="iframe_0.347088610753417" src="https://www.cnblogs.com/show-blocking-image.aspx?url=http%3A%2F%2Foutofmemory.cn%2Fugc%2Fupload%2F00%2F07%2F20121202%2Fgo-top-light-green.png&maxWidth=1509&origin=http://www.cnblogs.com&iframeId=iframe_0.347088610753417" frameborder="0" scrolling="no" height="128" style="margin: 0px; padding: 0px; border-style: none; border-width: initial; width: 1509px;">  id="iframe_0.9712604798842221" src="https://www.cnblogs.com/show-blocking-image.aspx?url=http%3A%2F%2Foutofmemory.cn%2Fugc%2Fupload%2F00%2F07%2F20121202%2Fgo-top-green.png&maxWidth=1509&origin=http://www.cnblogs.com&iframeId=iframe_0.9712604798842221" frameborder="0" scrolling="no" height="90" style="margin: 0px; padding: 0px; border-style: none; border-width: initial; width: 1509px;">  id="iframe_0.776993993204087" src="https://www.cnblogs.com/show-blocking-image.aspx?url=http%3A%2F%2Foutofmemory.cn%2Fugc%2Fupload%2F00%2F07%2F20121202%2Fgo-top-icone-7948-96.png&maxWidth=1509&origin=http://www.cnblogs.com&iframeId=iframe_0.776993993204087" frameborder="0" scrolling="no" height="96" style="margin: 0px; padding: 0px; border-style: none; border-width: initial; width: 1509px;">

有了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>