时间：2023-07-14 10:58:19 点击次数：17
jQuery是当今最流行的JS框架，利用jquery我们可以开发出很多高效的demo和成果。与此同时jquery相关的插件也可以很方便的完成一些特效，例如jquery scrollTo插件，可以方便的完成滑动到指定位置操作。记住由于jquery scrollto插件是依赖于jquery而产生，所以在头部文件引用时先引用jquery文件
要点：
jQuery scrollTo插件
jQuery框架
通过导航标题，进行检索可以点击进入相应部分
<nav id="stickynav">
<ul id="nav" class="clearfix">
<li><a href="#topbar">主页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#photos">极客图集</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
整个页面内容分为4个section，每个section展示不同的相关内容,根据ID名称当点击每个链接时会滑动到相应的位置，下面是其中一个section部分,此部分简单的显示一些内容语句，可以根据个人需求，编写相应代码
<section id="topbar" class="section">
<h1>单页面滑动效果</h1>
<p>单击每一个导航选项实现基本的滑动效果，其他页面的内容均是来自</p>
</section>
在同一张页面中涉及了以上4个模块，不想分页面展示，希望在一张页面中可以快速高效的查找到相关的内容，此时利用jquery scrollto插件的鼠标点击事件，执行相应的效果，代码如下，由于链接本身拥有一个hash 属性，hash是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分).当点击导航按钮时，所以触发scrollTo方法，$.scrollTo带有两个参数，第一个是指定要滚动的目的ID，第二个参数是滚动时间间隔，以毫秒为单 位。在本例中，只应用了scrollTo的基本方法。其实scrollTo还可以指定横向纵向滚动，传冲效果等，具体可以参照官方网站的例子：
http://demos.flesler.com/jquery/scrollTo/<script>
$(function{
$("#nav a").click(function(e){
e.preventDefault;
$(html,body).scrollTo(this.hash,this.hash);
});
});
</script>
<script>代码可以直接嵌入到html页面中，也可以书写成外部文件进行引入。
最后依据个人的html中dom结构，书写相应的css代码，进行页面的美化，例如对导航标题进行美化，设计成类似按钮形状
#stickynav #nav li { display: inline;}
#stickynav #nav li a {
display: block;
float: left;
margin-right: 8px;
font-size: 1.5em;
font-weight: 200;
padding: 11px 8px;
background: #ff9900;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #ffffff;
}
jQuery拥有很多灵活的小插件，可以帮助我们在工作的时候，少写很多的代码，而且维护成本低，有效的节省了时间。
如果有兴趣可以到社区的课程库进行更多的学习。
喜欢前端技术的同学么，可以持续关注我的文章并且点击下面按钮关注本人哦，^_^，我们一起交流和进步~~~~ ，希望我的文章，请多多留言， 灌水就不必了，来点干货留言 ，嘿嘿~~
点击阅读原文获得更多精彩内容
