滚屏导航条html,jQuery整页全屏滚动导航按钮特效插件

ScrollMenu是一款非常实用的jQuery整页全屏滚动导航按钮特效插件。通过ScrollMenu可以将导航按钮设置为垂直或水平的导航条，并可以带预览图。当点击一个导航按钮时，页面以整页全屏滚动的方式平滑过渡。

使用方法

使用该全屏翻页导航按钮插件需要引入jQuery(1.7+)和scrollmenu.css以及scrollmenu.js文件。

HTML结构

页面基本的HTML结构如下：

初始化插件

在页面加载完毕之后，可以通过下面的方法来初始化该插件。

var myScrollMenu = ScrollMenu([wrapper] [,options]);

ScrollMenu默认使用的section class来识别页面中的不同部分(section)。

ScrollMenu接收两个参数：

wrapper：(可选项)wrapper可以使一个选择器，DOM元素或jQuery对象。如果wrapper没有定义插件会默认使用

来作为wrapper。

options：(可选项)配置参数。

理解ScrollMenu

ScrollMenu包含3个主要部分，每个部分都包含各自不同的class和样式。

Anchors(className : scroll-anchor)：Anchors代表scrollbar中的一个section页面。一个anchor 在垂直导航条的高度或在水平导航条的宽度于代表的sections的高度成比例。

Handles (className : scroll-handle)：滚动导航条中的手柄。

Menu (className : scroll-menu-content)：Menu是导航菜单。

ScrollMenu的类型

ScrollMenu包含三种基本的类型。默认是vertical类型，可以通过menuType参数来修改它。

vertical：垂直滚动菜单。

horizontal：水平滚动菜单。

horizontal-menu：固定在顶部的水平菜单。

模板菜单和Anchor的设置

为了能够让用户定制独特的滚动菜单，插件提供了两个模板选项，例如：

var setupOption = {

template: '

anchorSetup: [

{

backgroundColor: "#dc767d",

label: "ScrollMenu.js",

className: "test"

},

{

backgroundColor: "#36d278",

label: "Demos"

},

{

backgroundColor: "#22cfc6",

label: "Custom Scroll Hooks",

template : ''

}]

};

var scrollMenu = ScrollMenu(setupOption);

配置参数

参数

允许值

默认值

描述

sectionClass

string

section

页面中每个部分的class标识符

menuType

vertical / horizontal / horizontal-menu

vertical

菜单的类型

appendTo

selector string / jquery object / dom elememt

container

在什么地方添加scrollMenu，默认添加到container中

animateOnScroll

boolean

true

如果设置为true将以动画的方式滚动

animationDuration

integer

600

动画的持续时间

nativeScroll

boolean

true

如果设置为true使用原生的滚动

scrollbarVisible

boolean

false

如果设置为false将隐藏原生的滚动条

scrollAnchorSpacing

integer

10

2个anchors之间的间距

anchorSetup

array of setup objec

null

A array of setup objects to template anchors and menu