html5段落跳转,jQuery全屏跟随和可平滑跳转到相应文章段落的导航菜单

这是一款非常实用的jQuery全屏跟随和可平滑跳转到相应文章段落的导航菜单插件。该菜单插件会自动检测你的HTML结构，搜索内容的标题并生成对应的菜单。当用户滚动页面，菜单将处于固定位置，并高亮当前用户正在浏览的内容的对应的菜单项。

HTML结构

要使用这个平滑跳转菜单插件，首先要在页面中引入jquery和jquery.jumpto.js以及immersive-slider.css文件。

Header 1

SubHeader 1

....

SubHeader 2

....

Header 2

SubHeader 1

...

html结构使用page_container作为wrapper。在它的内部，每一个文章段落都用一个div来包裹，在demo中是div jumpto-block，这是为了方便插件搜索每个段落的标题和子标题。

标题用来做第一级标题，

标题用来做第二级子标题。

JAVASCRIPT

使用下面的JS代码来调用该平滑跳转菜单插件。

$(".page_container").jumpto({

firstLevel: "> h2",

secondLevel: false,

innerWrapper: ".jumpto-block",

offset: 400,

animate: 1000,

navContainer: false,

anchorTopPadding: 20,

showTitle: "Jump To",

closeButton: true

});

在上面的调用设置中，二级子菜单将在一级菜单内部动态生成。菜单在用户滚动页面400px后会固定在页面上，并且当用户点击菜单项时，将在1000毫秒黑平滑的滚动到对应的段落处。

下面是一些可用的参数：

firstLevel：该参数用于设置一级菜单的选择器。默认值是> h2。

secondLevel：该参数用于设置二级子菜单的选择器。如果你设置它为> h3，那么所有一级菜单中的h3标签都被设置为二级子标题。默认值为"false"。

innerWrapper：该参数用于自定义文章内容段落的选择器。默认值为.jumpto-block。

offset：该参数用于定义页面向下滚动多少像素后菜单开始固定。默认值为400像素。

animate：该参数用于定义在点的菜单项时页面的滚动速度。设置为"false"关闭该参数。

navContainer：该参数用于设置菜单项出现的位置，可以通过该参数设置菜单的选择器(如demo3)。默认值为false。

anchorTopPadding：该参数用于设置标题和页面顶部的padding值。默认值为20px。

showTitle：你可以通过该参数为导航菜单设置一个标题。默认值为"Jump To"。设置为"false"可以隐藏它。

closeButton：该参数用于在菜单底部设置一个关闭按钮。默认值为"true"。设置为"false"可以隐藏关闭按钮。

closeButton：该参数用于在菜单底部设置一个关闭按钮。默认值为"true"。设置为"false"可以隐藏关闭按钮。