jQuery简单全屏垂直滚动插件（Scrollify）

演示  website 下载

插件介绍

scrolllify是一个jQuery垂直滚动插件，通过向下滚动页面时提供快照行为来增强单页滚动网站体验。

特征：

• 使用箭头键、鼠标移动或触摸滑动在一组区域中滚动。

• 向下/向上滚动时捕捉到滚动的页面。

• 能隐藏滚动条。

• 自动更新滚动的网址位置。

• 支持回调。

• 跨浏览器和跨设备。

• 支持触摸事件。

使用方法

1.在html页面末尾加载最新版本的jquery库和jqueryscrolllify插件文件。

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

2. 从CDN中加载jQuery easing插件，以获得简化选项（可选）。

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>  

3.为您的网站创建一组单页分区。

<section>
  Section 1
</section>

<section>
  Section 2
</section>

<section>
  Section 3
</section>

..

4. 插件初始化。

$(function() {
  $.scrollify({
    section : "section"
  });
});

5.插件默认选项。

$(function() {
  $.scrollify({

  // section should be an identifier that is the same for each section
  // A selector for the sections.
  section: "section", 

  // Scrollify lets you define a hash value for each section. 
  // This makes it possible to permalink to particular sections. 
  // This is set as a data attribute on the sections. 
  // The name of the data attribute is defined by 'sectionName'.
  sectionName: "section-name", 

  // A CSS selector for non-full-height sections, such as a header and footer.
  interstitialSection: "",

  // Define the easing method.
  easing: "easeOutExpo", 

  // Scrolling speed in milliseonds
  scrollSpeed: 1100,

  // A distance in pixels to offset each sections position by.
  offset : 0, 

  // A boolean to define whether scroll bars are visible or not.
  scrollbars: true, 

  // Target container
  target:"html,body",

  // A string of selectors for elements that require standard scrolling behaviour. 
  standardScrollElements: false,

  // A boolean to define whether Scollify assigns a height to the sections.
  setHeights: true,

  // Allows scrolling over overflowing content within sections
  overflowScroll:true,

  // Updates the browser location hash when scrolling through sections
  updateHash: true,

  // Allows to handle touch scroll events
  touchScroll:true,

  // callbacks
  before:function() {},
  after:function() {},
  afterResize:function() {},
  afterRender:function() {}

  });
});

6.api方法。

// Used to scroll to a particular section. 
// It can be parsed the index of the section, or the name of the section preceded by a hash.
$.scrollify.move("#name");

// Used to scroll to a particular section without animation. 
// It can be parsed the index of the section, or the name of the section preceded by a hash.
$.scrollify.instantMove("#name");

// Used to scroll to a panel that immediately follows the current panel.
$.scrollify.next()

// Used to scroll to a panel that immediately precedes the current panel.
$.scrollify.previous()

// Used to scroll to a panel that immediately follows the current panel, without animation.
$.scrollify.instantNext()

// Used to scroll to a panel that immediately precedes the current panel.
$.scrollify.instantPrevious()

// Removes all Scrollify events and removes set heights from the panels.
$.scrollify.destroy()

// The update methods recalculates the heights and positions of the panels.
$.scrollify.update()

// The current method returns the current section as a jQuery object.
$.scrollify.current()

// The disable method turns off the scroll snap behaviour so that the page scroll like normal.
$.scrollify.disable()

// The enable method resumes the scroll snap behaviour after the disable method has been used.
$.scrollify.enable()

// The isDisabled method returns true if Scrollify is currently disabled, otherwise false.
$.scrollify.isDisabled()