jQuery定位跳转插件（jquery.scrollto.js）

2021-06-23 15:28 归属：前端资讯阅读( )

jquery.scrollTo-min.js 用户返回顶部及动画到目的地，支持目标值、锚点。

版本系列地址：http://www.bootcdn.cn/jquery-scrollTo/

https://github.com/flesler/jquery.scrollTo

提取码：0797

在官方地址中并没有特别详细的说明，只是说插件可以按x轴、y轴滚动。可以嵌套元素，当前元素在父元素中滚动。官方提供demo下载，在demo中有应用案例，如在父元素中滚动，滚动定位的间隔时间等。

//定位到当前页面wrap元素中第4个h3元素，间隔时间为800毫秒。
$.scrollTo( '#wrap > h3:eq(3)', 800 );

//可以通过初始化定义延x轴或y轴滚动定位。详细可以看官方demo演示
$.scrollTo( '#wrap > h3:eq(3)', 800,{ axis:'x' } );  //x轴

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ScrollTo：平滑滚动到页面指定位置</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="jquery.scrollTo.js"></script>
<style type="text/css">
* {margin: 0; padding: 0;font-family: STSong;}
.nav{list-style: none; position: fixed; background: #000; display: inline-block;}
.nav li{float:left; width:150px; height:24px; line-height:24px; text-align: center; }
.box{height:630px}
.box h3{height:32px; line-height:32px; padding-left:20px; font-size:14px; float: right; margin-right: 20px;}
#pro,#ser,#job{ background-color:#f60;}
#news,#con{ background:#06f;}
a{color: #fff; text-decoration: none;}
</style>
<script type="text/javascript">
$(function(){
  $(".nav_pro").click(function(){
    $.scrollTo('#pro',500);
  });
  $(".nav_news").click(function(){
    $.scrollTo('#news',800);
  });
  $(".nav_ser").click(function(){
    $.scrollTo('#ser',1000);
  });
  $(".nav_con").click(function(){
    $.scrollTo('#con',1200);
  });
  $(".nav_job").click(function(){
    $.scrollTo('#job',1500);
  });
});
</script>
</head>
<body>
<ul class="nav">
  <li><a href="#" class="nav_pro">产品展示</a></li>
  <li><a href="#" class="nav_news">新闻中心</a></li>
  <li><a href="#" class="nav_ser">服务支持</a></li>
  <li><a href="#" class="nav_con">联系我们</a></li>
  <li><a href="#" class="nav_job">人才招聘</a></li>
</ul>
<div id="pro" class="box">
  <h3>产品展示</h3>
</div>
<div id="news" class="box">
  <h3>新闻中心</h3>
</div>
<div id="ser" class="box">
  <h3>服务支持</h3>
</div>
<div id="con" class="box">
  <h3>联系我们</h3>
</div>
<div id="job" class="box">
  <h3>人才招聘</h3>
</div>
 
</body>
</html>

完毕

- END -

本文地址：jQuery定位跳转插件（jquery.scrollto.js） - 赣州建站资讯网

标签：scrollTop scroll

声明：文字图片等素材除标明原创外均来源于网络，如有侵权，请及时告知我们，我们将在最短的时间内删除！

上一篇：CSS3动画（360度旋转、旋转放大、放大、移动）
下一篇：纯css实现元素下出现横线动画（background-image）