NavScroll - 一个用于动画滚动到页面的某个部分简单的 jQuery 插件
  • 分享到微信朋友圈
    X
查看演示

关于NavScroll.js

NavScroll.js 是一个简单的 jQuery 插件，用于动画滚动到页面的某个部分，并且可以用于移动下拉菜单。

如何使用NavScroll.js

引入文件

在您的页面中包含最新版本的 jQuery 和 navScroll 插件。

<script src="jquery/jquery.min.js"></script>
<script src="jquery.navScroll.js"></script>
<script>
    // 将 navScroll 附加到不支持移动下拉菜单的元素
    $('.nav').navScroll();

    // 或者您可以启用移动下拉菜单支持并为其指定自定义断点（默认为 1024）
    $('.nav').navScroll({
        mobileDropdown: true,
        mobileBreakpoint: 768
    });
</script>

在线演示：演示

参数说明

  • scrollTime 滚动到该元素所需的时间（以毫秒为单位）（将其设置为 0，因此显然不会显示动画）Integer 500。

  • navItemClassName 调用滚动动画的项目的类。当值为空时，元素内的所有锚标签都是可点击的 String '' 。

  • navHeight 设置导航的高度（用作偏移量）。“auto”让插件自动确定高度，数字决定 px 中的高度。 Integer or String 'auto'

  • mobileDropdown 如果您的导航隐藏并在小屏幕上用作下拉菜单，则将其设置为 true 会在单击后隐藏下拉菜单。 Boolean false

  • mobileDropdownClassName 另外，您可以在此处插入移动导航的类名，当留空时，插件会 在同一个父元素中搜索。 String ''

  • mobileBreakpoint “移动”断点（如媒体查询的最大宽度）。如果您使用移动下拉菜单支持，建议您检查此项。 Integer 1024

  • scrollSpy 如果您想启用 scrollspy，则设置为 true，当您滚动经过导航项的部分时，它会向导航项添加一个活动类。 Boolean false

  • activeParent 如果希望锚点的父级具有活动类而不是锚点本身，则设置为 true（仅当启用了 ScrollSpy 时）。 Boolean false

  • activeClassName 设置使用ScrollSpy时活动类的名称。 String 'active'