介绍
jquery-one-page-nav 是一款基于 jQuery 的单页网站导航插件，它可以快速实现单页网站的导航栏功能，并支持平滑滚动和动画效果等特性。
本文将详细介绍如何使用 npm 包管理器来安装和使用 jquery-one-page-nav 插件。
安装
首先，你需要在项目中安装 npm 包管理器。在命令行中输入以下命令即可：
npm install --save jquery-one-page-nav
这个命令会将 jquery-one-page-nav 插件作为项目的依赖项进行安装，并将其添加到 package.json 文件中。
使用
在安装完成后，在 HTML 页面中引入 jQuery 和 jquery-one-page-nav 插件的 JavaScript 文件：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="./node_modules/jquery-one-page-nav/jquery.nav.min.js"></script>
然后，在页面加载完毕后，调用一下代码即可启用 jquery-one-page-nav 插件：
$(document).ready(function() {
$('#nav').onePageNav();
});这里，我们假设你已经在页面中创建了一个 id 为 "nav" 的导航栏。onePageNav() 方法将通过 jQuery 选择器选中该元素，并将其转换为单页网站导航栏。
如果你想在导航条上设置当前选中项的样式，可以通过添加以下 CSS 样式来实现：
.nav li.current a {
font-weight: bold;
}配置选项
jquery-one-page-nav 插件支持多种配置选项，以下是一些常用选项：
-- -------------------- ---- -------
----------------------
------------- ----------
------------ ----
------- --------
------- ------------------
------------- --
------ ---------- ---
---- ---------- ---
------------- -------------------------- --
---其中，currentClass 表示当前选中项的 CSS 类名，默认为 "current"；scrollSpeed 表示平滑滚动的速度，默认为 750；easing 表示滚动动画的缓动函数，默认为 "swing"；filter 表示要滚动的内容元素的筛选器，默认为 ":not(.external)"；scrollOffset 表示滚动后距离顶部的偏移量，默认为 0。
此外，还可以定义 begin、end 和 scrollChange 回调函数，在相应的事件发生时执行。例如：
-- -------------------- ---- -------
----------------------
------ ---------- -
--------------------
--
---- ---------- -
--------------------
--
------------- -------------------------- -
-------------------- - -----------------------------------
-
---这将在滚动开始、结束和选中项发生变化时输出相应信息。
示例代码
下面是一个完整的示例代码，你可以将其保存为 HTML 文件并在浏览器中打开来查看效果：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------- ------------
-------
---- ---------- - -
------------ -----
-
------- -
------- ------
-------- -----
----------------- --------
-
----------------------- -
----------------- -----
-
-- -
----------- --
-
--------
-------
------
--- ---------
------ ------------------------ ----------
------ ------------------------ ----------
------ ------------------------ -------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------