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>

</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="//code.jquery.com/jquery.min.js"></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
myScroll.moveTo(3);

// jump to a specific section
// 2 = section one
myScroll.silentMoveTo(2);

// scroll back to the previous section
myScroll.moveToUp();

// scroll to the next section
myScroll.moveToDown();

// disable mouse wheel
myScroll.stopWheel();

// enable mouse wheel
myScroll.startWheel();

// disable page scroll
myScroll.stopScroll();

// enable page scroll
myScroll.startScroll();

Change log:

2018-01-23

• 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.