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