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

老白 6个月前 328浏览 0评论

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

JQuery返回顶部.gif jQuery 实现返回顶部滑动跳转效果 js/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>

发表评论