在过去的几年里，单页滚动网站变得相当流行。它们给你一个很好的外观和感觉，在自然界中更具互动性。如果你想为自己制作一个，但又不想从头开始编写整个网站的代码，那么最简单的方法之一就是安装一个单页滚动插件。

jFullPageScroller是一个jQuery插件，它可以在您的网络应用程序或登录页上创建令人印象深刻、平滑和可配置的水平或垂直单页滚动体验。非常适合在移动设备或平板电脑等较小屏幕上显示长内容。它完全基于jQuery animate（）方法构建，在现代浏览器和旧版本的IE中具有交叉兼容的性能。

如何使用它:

1.在HTML中添加页面部分。可用的HTML属性：

• jfps剖面方向：设置页面的滚动方向：“水平”或“垂直”。
• jfps部分：每个部分的必需属性。
• jfps部分id：为每个部分指定一个唯一的ID。如果您有页眉导航，则为必填项。

<main jfps-section-direction="vertical">
  <section jfps-section jfps-section-id="section-1">
    <div>
      <h1>Section #1</h1>
    </div>
  </section>
  <section jfps-section jfps-section-id="section-2">
    <div>
      <h1>Section #2</h1>
    </div>
  </section>
  <section jfps-section jfps-section-id="section-3">
    <div>
      <h1>Section #3</h1>
    </div>
  </section>
  <section jfps-section jfps-section-id="section-4">
    <div>
      <h1>Section #4</h1>
    </div>
  </section>
  <section jfps-section jfps-section-id="section-5">
    <div>
      <h1>Section #5</h1>
    </div>
  </section>
</main>

2.创建一个标题导航栏，其中包含指向页面上不同内容部分的锚链接。可选。

<header id="demo-header">
  <nav>
    <a jfps-nav jfps-target-section="section-1" href="#section-1">Section #1</a>
    <a jfps-nav jfps-target-section="section-2" href="#section-2">Section #2</a>
    <a jfps-nav jfps-target-section="section-3" href="#section-3">Section #3</a>
    <a jfps-nav jfps-target-section="section-4" href="#section-4">Section #4</a>
    <a jfps-nav jfps-target-section="section-5" href="#section-5">Section #5</a>
  </nav>
</header>

/* example CSS */
#demo-header {
  padding: 1rem;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 10;
}
 
#demo-header a {
  color: #333;
  cursor: pointer;
  font-size: 1rem;
  margin: 0 1rem;
  text-decoration: none;
}
 
#demo-header a.active {
  text-decoration: underline;
}
 
#demo-header a:hover {
  text-decoration: underline;
}

3.将jQuery库和jFullPageScroller插件的文件添加到HTML页面。

<link href="/path/to//dist/jFullPageScroller.min.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to//dist/jFullPageScroller.min.js"></script>

4.初始化插件并完成。

$.jFullPageScroller({
  // options
});

5.配置平滑滚动动画。

$.jFullPageScroller({
  animationDelay: 0,
  animationSpeed: 1000,
});

6.确定是否允许使用箭头键滚动页面。默认值：true。

$.jFullPageScroller({
  enableKeyPressScroll: true,
});

7.确定是否启用页眉导航。默认值：false。

$.jFullPageScroller({
  withNavigation: true,
});

8.在滚动页面部分时触发一个功能。

$.jFullPageScroller({
  // options
}, function() {
  // Section #1 Callback
}, function() {
  // Section #2 Callback
}, function() {
  // Section #3 Callback
}, function() {
  // Section #4 Callback
}, function() {
  // Section #5 Callback
});

更新日志：

v1.3（2022年12月6日）

• 改进了回调功能。
• 主要修复和改进。

v1.2（2022年10月6日）

• 小的修复和改进。

v1.1（2022年5月6日）

• 修正了在移动设备上滚动不起作用的错误。
• 主要修复和改进。

预览截图

jQuery创建令人印象深刻 单页滚动体验