位置：广州松河 > 技术支持 > jQuery 实现返回顶部滑动跳转效果_js/jQuery

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

来源：网络整理时间：2023/3/4 1:04:04 共 3595 浏览

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

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

之前陆续分享了好几篇关于返回顶部的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(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(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>

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：margin设置为什么会失效？无效情形解析！_CSS学习 | ·下一条：即插即用 js隐藏与显示回到顶部（返回顶部）按钮_js/jQuery