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

2024-05-12 18:42:48

这是一款非常实用的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"可以隐藏关闭按钮。

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

jquery video全屏_用videojs让HTML5视频在移动端全屏的方法
用videojs让HTML5视频在移动端全屏的方法文章标签: 视频 : 04-10 19:23 : 1859次 : 0条 1赞点赞简介在使用videojs插件时,如何让HTML5的视频在移动端里 ...
html全屏漂浮,jquery全屏漂浮广告插件，可点击关闭(原创)
jquery全屏漂浮广告插件兼容主流浏览器实现简单调用简单在线预览源码下载 jquery全屏漂浮广告插件兼容主流浏览器实现非常简单说明:jquery在1.9开始不支持.live()方法 ...
分享一款jQuery全屏滚动页面特性案例
分享一款jQuery全屏滚动页面特性案例. 我们在来往官网,或者小米官网都会看到全屏滚动页面的一些例子.可以说全屏滚动页面越来越受欢迎.它们就像是竖着的图片轮转一样. 这样的页面有很多,如:iPhon ...
html手机端自动全屏,HTML5在手机端实现视频全屏展示方法
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能.测试了很久,终于找到解决办法. 第一种:将视频放大来控制. 视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 1 ...
HTML5视频手机全屏,HTML5在手机端实现视频全屏展示方法
这篇文章主要介绍了HTML5在手机端实现视频全屏展示方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧最近做项目,遇到一个问题 ...
熊猫怎么用html5看直播,熊猫TV HTML5播放器自动网页全屏
// ==UserScript== // @name 熊猫TV HTML5播放器自动网页全屏 // @name:zh-CN 熊猫TV HTML5播放器自动网页全屏 // @namespace pand ...
php 轮播图插件下载,jquery全屏响应式轮播图插件jquery.flexslider.js
在zblogPHP主题 yunduan 上使用这个轮播幻灯片插件jquery.flexslider.js,分享下使用方法: 这是一款jquery全屏响应式淡入淡出效果轮播图插件.该轮播图插件简单实用, ...
html全屏轮播图插件,jQuery全屏3D轮播图插件
jQuery.PageScroll3D是一款jQuery全屏3D轮播图插件.该jquery轮播图插件采用响应式设计,可以在垂直方向上制作出类似立方体滚动的3d轮播图效果. 使用方法在页面中引入jqu ...
在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节查看作业目录需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果用户将光标移动到"最新动态页"或"帮助查询" ...

最新文章

热门文章