注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

单页平滑滚动导航插件jQuery One Page Nav

菜单 fishcity 4132浏览

单页平滑滚动导航插件jQuery One Page Nav

jQuery One Page Nav一个轻量级的jQuery的网站单页平滑滚动导航插件,One Page Nav可实点击对应的菜单项网页平滑的滚动到对应的内容区域,滚动鼠标滚轮,随着页面的滚动,菜单选项会跟随所显示的区域自动被选中。

One Page Nav单页菜单插件在页面各菜单项的内容区域外添加额外的内容块仍然可以正常的工作,不受新增内容影响。

使用方法

引入核心文件

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
//其它版本的jquery也可以,根据你项目的需求
<script src="jquery.nav.js"></script>

构建html标签

<ul id="nav">
    <li class="current"><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>
</ul>

<div id="section-1">
    <strong>Section 1</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div id="section-2">
    <strong>Section 2</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div id="section-3">
    <strong>Section 3</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

写入JS,使用默认参数初始化

$('#nav').onePageNav({
    currentClass: 'current',
    changeHash: false,
    scrollSpeed: 750,
    scrollThreshold: 0.5,
    filter: '',
    easing: 'swing',
    begin: function() {
        //I get fired when the animation is starting
    },
    end: function() {
        //I get fired when the animation is ending
    },
    scrollChange: function($currentListItem) {
        //I get fired when you enter a section and I pass the list item of the section
    }
});

如果你想当用户点击时改菜单选项的hash(哈希值),那么请把changeHash设置为true.

实现过滤跳转

如果你想跳过某个菜单选项或是让这个菜单选项直接链接到其它地址,那么只需把这个菜单项的选择器传给写filter参数选项即可。

<ul id="nav">
    <li class="current"><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>
    <li><a href="#section-4">Section 4</a></li>
    <li><a href="#section-5">Section 5</a></li>
    <li><a href="http://google.com" class="external">Some other link</a></li>
</ul>

$('#nav').onePageNav({
    filter: ':not(.external)'
});

如果在IOS设备上有问题

如果你单击菜单选项上的链接而导致其它链接失效,直到滚动才恢复,那么你可以用以下这方式来解决。

$('#nav').onePageNav({
    begin: function() {
        //Hack so you can click other menu items after the initial click
        $('body').append('<div id="device-dummy" style="height: 1px;"></div>');
    },
    end: function() {
        $('#device-dummy').remove();
    }
});

转载请注明:jQ酷 » 单页平滑滚动导航插件jQuery One Page Nav

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。