Smooth Page Scrolling with Fancy Effects - anchorScroll.js
File Size: | 6.67 KB |
---|---|
Views Total: | 3595 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
anchorScroll is a jQuery JavaScript 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 package and include the anchorScroll.min.js
script on the page.
<script src="/path/to/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.
document.addEventListener('DOMContentLoaded', function() { const elements = document.querySelectorAll('.anchor-scroll'); elements.forEach(el => { new AnchorScroll(el, { // options here }); }); });
4. Add a custom CSS class to a specific element while page scrolling.
<a href="#test" class="anchor-scroll" data-class-to="body" data-scroll-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-scroll-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.
document.addEventListener('DOMContentLoaded', function() { const elements = document.querySelectorAll('.anchor-scroll'); elements.forEach(el => { new AnchorScroll(el, { // top offset in pixels offsetTop: 0, // callbacks scrollStart: function () { // callback on scroll start }, scrollEnd: function () { // callback on scroll end } }); }); });
Changelog:
2024-03-12
- Fixed demos
- Updated doc
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.