单页面滚动式网站模版开发

• 在线演示1
•  
• 本地下载  

 

jQuery是当今最流行的JS框架，利用jquery我们可以开发出很多高效的demo和成果。与此同时jquery相关的插件也可以很方便的完成一些特效，例如jquery scrollTo插件，可以方便的完成滑动到指定位置操作。记住由于jquery scrollto插件是依赖于jquery而产生，所以在头部文件引用时先引用jquery文件

要点：(原文链接：http://www.gbtags.com/gb/share/5641.htm)

•   jQuery scrollTo插件
•   jQuery框架

以导航标题为例展示

通过导航标题，进行检索可以点击进入相应部分

1. <nav id="stickynav">
2. <ul id="nav" class="clearfix">
3. <li><a href="#topbar">主页</a></li>
4. <li><a href="#about">关于我们</a></li>
5. <li><a href="#photos">极客图集</a></li>
6. <li><a href="#contact">联系我们</a></li>
7. </ul>
8. </nav>

 

 整个页面内容分为4个section，每个section展示不同的相关内容,根据ID名称当点击每个链接时会滑动到相应的位置，下面是其中一个section部分,此部分简单的显示一些内容语句，可以根据个人需求，编写相应代码

结构展示

1. <section id="topbar" class="section">
2. <h1>单页面滑动效果</h1>
3. <p>单击每一个导航选项实现基本的滑动效果，其他页面的内容均是来自</p>
4. </section>

 

 在同一张页面中涉及了以上4个模块，不想分页面展示，希望在一张页面中可以快速高效的查找到相关的内容，此时利用jquery scrollto插件的鼠标点击事件，执行相应的效果，代码如下，由于<a>链接本身拥有一个hash 属性，hash是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分).当点击导航按钮时，所以触发scrollTo方法，$.scrollTo带有两个参数，第一个是指定要滚动的目的ID，第二个参数是滚动时间间隔，以毫秒为单 位。在本例中，只应用了scrollTo的基本方法。其实scrollTo还可以指定横向纵向滚动，传冲效果等，具体可以参照官方网站的例子： http://demos.flesler.com/jquery/scrollTo/

事件处理

1. <script>
2. $(function(){
3. $("#nav a").click(function(e){
4. e.preventDefault();
5. $('html,body').scrollTo(this.hash,this.hash);
6. });
7. });
8. </script>

 

<script>代码可以直接嵌入到html页面中，也可以书写成外部文件进行引入。

添加样式

最后依据个人的html中dom结构，书写相应的css代码，进行页面的美化，例如对导航标题进行美化，设计成类似按钮形状

1. #stickynav #nav li { display: inline;}
2. #stickynav #nav li a {
3. display: block;
4. float: left;
5. margin-right: 8px;
6. font-size: 1.5em;
7. font-weight: 200;
8. padding: 11px 8px;
9. background: #ff9900;
10. -webkit-border-radius: 4px;
11. -moz-border-radius: 4px;
12. border-radius: 4px;
13. color: #ffffff;
14. }

 

结束语

jQuery拥有很多灵活的小插件，可以帮助我们在工作的时候，少写很多的代码，而且维护成本低，有效的节省了时间。

如果有兴趣可以到社区的课程库进行更多的学习。

(原文链接：http://www.gbtags.com/gb/share/5641.htm)

喜欢前端技术的同学么，可以持续关注我的文章并且点击下面按钮关注本人哦，^_^，我们一起交流和进步~~~~  ，希望我的文章，请多多留言， 灌水就不必了，来点干货留言 ，嘿嘿~~

转载于:https://www.cnblogs.com/kvhur/p/4629939.html