vPageScroll.js 简单而强大的用于创建响应式单页滚动web布局的jQuery插件

简介

vPageScroll.js是一个简单而强大的jQuery插件，用于为单页滚动网站创建响应网格布局。该插件带有一个完全响应的侧面或顶部导航栏，允许访问者平滑地滚动浏览网页的不同部分。

（下载的附件中附有DEMO）

更多单页滚动插件：👉  [ 详情 ]

使用

1.  引入文件

<link href="src/css/jquery.vpagescroll.grid.css" rel="stylesheet">
<link href="src/css/jquery.vpagescroll.styles.css" rel="stylesheet">
<link href="src/css/jquery.vpagescroll.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/js/jquery.vpagescroll.js"></script>

2.  HTML

创建一个空容器来放置导航：

<div id="navigation"></div>

为单页滚动网站创建分区。使用data-*属性可以单独自定义每个部分：

<div class="main">

  <section data-title="Home" data-icon="fa-home" data-color="#1abc9c">
    <div class="container-12">
      <div class="inner">
        <div class="grid-6">Content 1.1</div>
        <div class="grid-6">Content 1.2</div>
      </div>
    </div>
  </section>

  <section data-title="Section 2" data-icon="fa-home" data-color="#2ecc71">
    <div class="container-12">
      <div class="inner">
        <div class="grid-2">Content 2.1</div>
        <div class="grid-10">Content 2.2</div>
      </div>
    </div>
  </section>

  <section data-title="Section 3" data-icon="fa-home" data-color="#3498db">
    <div class="container-12">
      <div class="inner">
        <div class="grid-3">Content 3.1</div>
        <div class="grid-9">Content 3.2</div>
      </div>
    </div>
  </section>

</div>

3.  调用

$(document).ready(function(){
  $(".main").vpagescroll({

    // the container
    sectionContainer: "section",   

    // the inner container
    sectionInner    : ".inner",

    // the navigation container
    navigation      : "#navigation"

  });
});

相关链接

作者官网 ：   https://sayhello.ch/?ref=vir2al.chvpagescroll

易助科技网文档地址：  http://demo.easyzone.net.cn/plugin/vPageScroll/demo.html

易助科技网效果演示地址：  http://demo.easyzone.net.cn/plugin/vPageScroll/demo.html