jQuery Plugin For Smooth Page Scrolling - MK_smoothScroll

File Size: 6.81 KB
Views Total: 2198
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Smooth Page Scrolling - MK_smoothScroll

MK_smoothScroll is a super tiny jQuery one page scroll plugin for handling automatic smooth page scrolling with a pagination control.

The plugin automatically smoothly scrolls the page and snaps to the next/prev page section with mouse wheel. You can also click the pagination bullets to switch between these page sections just like a slider.

Requires the wheel-indicator library to indicate when a user makes swipe gesture on a trackpad or mouse wheel.

How to use it:

1. Load the necessary jQuery and wheel-indicator libraries in the HTML page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/wheel-indicator.js"></script>

2. Insert content sections into your one page scroll website.

<div class="mk_scroller_block demo-page-block">
  Section 1
</div>
<div class="mk_scroller_block demo-page-block">
  Section 2
</div>
<div class="mk_scroller_block demo-page-block">
  Section 3
</div>
<div class="mk_scroller_block demo-page-block">
  Section 4
</div>
<div class="mk_scroller_block demo-page-block">
  Section 5
</div>

3. Make the sections fullscreen.

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100vw;
  height: auto;
}

.demo-page-block {
  height: 100vh;
  width: 100%;
}

4. Download and insert the jQuery MK_smoothScroll plugin's JavaScript & Stylesheet into the page. Done.

<link rel="stylesheet" href="./lib/mk_smoothScroll.min.css" />
<script src="./lib/mk_smoothScroll.min.js"></script>

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