jQuery Plugin For Smooth Page Scrolling with Fancy Effects - anchorScroll
File Size: | 3.9 KB |
---|---|
Views Total: | 3097 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

anchorScroll is a jQuery plugin that allows your anchor link to smoothly scroll to an specified section / position within the document, in addition to adding a CSS class to a specific element so that you can create a custom CSS based effect when vertical page scrolling.
How to use it:
1. Download the anchorScroll plugin and include the jquery.anchorScroll.min.js
script after jQuery library.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="jquery.anchorScroll.min.js"></script>
2. Create an anchor link which allows you to smoothly scroll the page to section '#test'.
<a href="#test" class="anchor-scroll"></a>
3. Initialize the plugin to active the smooth page scrolling.
$('.anchor-scroll').anchorScroll();
4. Add a custom CSS class to a specific element while page scrolling.
<a href="#test" class="anchor-scroll" data-class-to="body" data-scoll-start="class-1" data-scroll-end="class-2" ></a>
5. Determine whether to keep the class that is added when scrolling starts/ends.
<a href="#test" class="anchor-scroll" data-class-to="body" data-scoll-start="class-1" data-scroll-end="class-2" data-keep-start data-keep-end ></a>
6. This will assign the CSS class 'class-1' to your 'body' tag when the page stars scrolling. You can also use data-scroll-end
to assign a CSS class to the 'body' tag when stops scrolling.
.class-1 { /* cool CSS3 aniamtions here */ } .class-2 { /* cool CSS3 aniamtions here */ }
7. Available options.
$('.anchor-scroll').anchorScroll({ // scroll speed scrollSpeed: 800, // top offset in pixels offsetTop: 0, // callbacks onScroll: function () { // callback on scroll start }, scrollEnd: function () { // callback on scroll end } });
Changelog:
2023-09-19
- Fixed multiple class names
2022-02-05
- Changed data attribute data-on-scroll to data-scroll-start
- Added keep class options
- Code cleanup
This awesome jQuery plugin is developed by virgiliud. For more Advanced Usages, please check the demo page or visit the official website.