jQuery Plugin For Smooth Page Scrolling - MK_smoothScroll
| File Size: | 6.81 KB |
|---|---|
| Views Total: | 2237 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.











