Animated One Page Scrolling With jQuery - partialScroll.js

File Size: 42.5 KB
Views Total: 6403
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Animated One Page Scrolling With jQuery - partialScroll.js

partialScroll.js is a jQuery one page scroll plugin for modern web app that enables the user to scroll through fullscreen pages using navigation buttons and/or mousewheel.

How to use it:

1. Create the fullscreen pages you want to scroll through.

<div class="container">

    <div class="section">1</div>
    <div class="section">2</div>
    <div class="section">3</div>
    <div class="section">4</div>
    <div class="section footer"></div>


2. The required CSS styles to make the sections fullscreen.

.container {
  width: 100vw;
  height: 100vh;
  position: relative;

.section {
  width: 100vw;
  height: 100vh;

3. Include both jQuery library and the jquery.partialScroll.js script at the end of the html document.

<script src="//"></script>
<script src="dist/jquery.partialScroll.js"></script>

4. Possible plugin options and callback functions.

var myScroll = $('.container').partialScroll({

    // or horizontal
    mode: 'vertical',

    // width of section
    secWidth: 0, 

    // height of section
    secHeight: 0,

    // length of section
    secLength: 0, 

    // animation speed
    scrollingSpeed: 900, 

    // used to prevent performance issues
    throttleScrolling: 100, 

    // shows footer as you scroll to the last section
    footer: false,

    // enable mouse wheel
    globalWheel: true,  

    // selector of top container
    globalSelector: 'html',

    // callbacks
    sliderBefore: function () { return true; },
    sliderAfter: function () { return true; }

5. API methods.

// create a new instance
var myScroll = $('.container').partialScroll();

// scroll to a specific section
// 3 = section two

// jump to a specific section
// 2 = section one

// scroll back to the previous section

// scroll to the next section

// disable mouse wheel

// enable mouse wheel

// disable page scroll

// enable page scroll

Change log:


  • Added 'horizontal' mode in option.

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