jQuery 实现返回顶部滑动跳转效果

之前分享过太多返回顶部了，再来分享一个，稍后会做出一个返回顶部方法聚合来！

所谓的返回顶部，就是下拉后，点击返回顶部可以迅速回到网页顶部，提高用户操作网站的用户体验，现在几乎所有网站都要支持这个返回顶部功能！

之前陆续分享了好几篇关于返回顶部的JS特效代码，不管是最原始的即插即用的javascript，还是需要JQuery支持的JS，都测试通过可以正常使用，今天本文介绍的也是经过测试，可以正常返回顶部的代码：

!DOCTYPE HTML>
    html>
    head>
    title>
    用jQuery实现返回顶部滑动跳转效果/title>
    meta http-equiv="Content-Type" content="text/html;
     charset=utf-8" />
    style>
body, p, a, div {
     margin: 0px;
     padding: 0px;
}
#back-to-top {
     position: fixed;
     bottom: 100px;
     left: 60px;
}
#back-to-top a {
     text-align: center;
     text-decoration: none;
     color: #d1d1d1;
     display: block;
     width: 80px;
     /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/ -moz-transition: color .1s;
     -webkit-transition: color .1s;
     -o-transition: color .1s;
}
#back-to-top a:hover {
     color: #979797;
}
#back-to-top a span {
     background: #d1d1d1;
     border-radius: 6px;
     display: block;
     height: 80px;
     width: 80px;
     background: #d1d1d1 url(http://demo.jb51.net/js/2014/return-top/images/arrow-up.png) no-repeat center center;
     margin-bottom: 5px;
     -moz-transition: background .1s;
     -webkit-transition: background .1s;
     -o-transition: background .1s;
}
#back-to-top a:hover span {
     background: #979797 url(http://demo.jb51.net/js/2014/return-top/images/arrow-up.png) no-repeat center center;
}
    /style>
    script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    /script>
    script type="text/javascript">
 $(document).ready(function(){
     //首先将#back-to-top隐藏 $("#back-to-top").hide();
 //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失 $(function () {
  $(window).scroll(function(){
      if ($(window).scrollTop()>
100){
      $("#back-to-top").fadeIn(150);
  }
  else  {
      $("#back-to-top").fadeOut(150);
  }
  }
    );
  //当点击跳转链接后，回到页面顶部位置  $("#back-to-top").click(function(){
  $('body,html').animate({
scrollTop:0}
    ,100);
      return false;
  }
    );
  }
    );
  }
    );
      /script>
    /head>
    body id="top">
    p id="back-to-top">
    a href="#top">
    span>
    /span>
    回到顶部/a>
    /p>
    h1>
    Demo/h1>
    h2>
    用jQuery实现返回顶部滑动跳转效果/h2>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    p>
    测试文本/p>
    /body>
    /html>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！