Create Impressive One Page Scrolling Experience With jQuery

One page scroll sites have become quite popular over the last few years. They give you a great look and feel and are more interactive in nature. If you want to make one for yourself, but don't want to code the entire website from scratch, one of the easiest ways to go about that is by installing a One Page Scroll plugin.

jFullPageScroller is a jQuery plugin that creates an impressive, smooth and configurable horizontal or vertical one page scrolling experience on your web apps or landing pages. Great for displaying long content on smaller screens like mobile devices or tablets. It’s built entirely on the jQuery animate() method for a cross-compatible performance in modern browsers as well as older versions of IE.

How to use it:

1. Add page sections to your HTML. Available HTML attributes:

• jfps-section-direction: Set the scrolling direction of the page: 'horizontal' or 'vertical'.
• jfps-section: Required attribute for each section.
• jfps-section-id: Assign a unique ID to each section. Required if you have a header navigation.

<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. Create a header navigation bar that contains anchor links pointing to different content sections on the page. OPTIONAL.

<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. Add jQuery library and the jFullPageScroller plugin's files to the HTML page.

<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. Initialize the plugin and done.

$.jFullPageScroller({
  // options
});

5. Config the smooth scrolling animation.

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

6. Determines whether to allow scrolling of pages using arrow keys. Default: true.

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

7. Determines whether to enable the header navigation. Default: false.

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

8. Trigger a function when scrolling through page sections.

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

Changelog:

v1.3 (06/12/2022)

• Improved the callback functionality.
• Major fixes and improvements.

v1.2 (06/10/2022)

• Minor fixes and improvements.

v1.1 (06/05/2022)

• Fixed a bug which scrolling does not work on mobile devices.
• Major fixes and improvements.

---

This awesome jQuery plugin is developed by kevinkarl22. For more Advanced Usages, please check the demo page or visit the official website.