关于section-scroll插件：

关于section-scroll插件：是可生成垂直整页滚动导航的jQuery插件。

使用方法

下载压缩包，在页面中引入jquery，jquery.section-scroll.js和section-scroll.css文件。如果你需要制作带easing效果的动画过渡效果，可以引入jquery.easing.1.3.js文件。

<link href="css/section-scroll.css" rel="stylesheet" />

<script src="js/jquery.min.js"></script>

<script src="js/jquery.easing.1.3.js"></script>  <!--easing效果的动画过渡效果-->

<script src="js/jquery.section-scroll.js"></script>

HTML结构

该插件会将每一个<section>元素作为一个段落，每一个滚动导航按钮会对应一个段落。

<div class="scrollable-section" data-section-title="段落-1"></div>

<div class="scrollable-section" data-section-title="段落-2"></div>

<div class="scrollable-section" data-section-title="段落-3"></div> 

scrollable-section是你想要加入到滚动导航中的<section>。data-section-title插件会将该属性作为导航菜单项的标题。 

<script type="text/javascript">

  $(document).ready(function () {

      $('body').sectionScroll({　　　　　　

         bulletsClass: 'section-bullets',    //设置圆点导航菜单的class类

         sectionsClass: 'scrollable-section',   //默认插件会查找class为scrollable-section的<section>元素作为滚动的段落，通过该参数可以改变这个class


         scrollDuration: 1000,   //从一个section滚动到另一个section的持续时间


         titles: true,  //设置为false可以在导航中隐藏标题


         topOffset: 0,  //例如设置该值为100会在滚动到section时，section距离页面顶部100像素


         easing: ''

 

});

  })

 

</script>

 

 

事件

• section-reached：当每一个section滚动进入屏幕时都会触发该事件。
• $('body').on('section-reached', function(){

      console.log('section-reached');

  }) 

   

  $('body').on('section-reached', function(){

      var section_title = $('body').sectionScroll.activeSection.data('section-title');

      alert(section_title);

  })