- Overview
- Documents
The jQuery fragment scroll plugin replaces the default fragment link behavior with a scroll animation. The plugin only works for descendants of the given element(s).
Source: github.com
Jun 24, 2014 in Scroll 3796 views
The jQuery fragment scroll plugin replaces the default fragment link behavior with a scroll animation. The plugin only works for descendants of the given element(s).
Source: github.com
1. INCLUDE JS FILES
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="assets/js/jquery.easing.min.js"></script> <script type="text/javascript" src="assets/js/jquery.fragmentscroll.min.js"></script>
2. HTML
<div id="nav"> <p><a href="#fragment">Content</a></p> </div> <div id="fragment"> <p>Footer</p> </div>
3. JAVASCRIPT
$(window).load(function() { $('body').fragmentScroll(); });
4. JAVASCRIPT
$('body').fragmentScroll({ // The frame that will scroll if the content overflows the elements box. (body for webkit browsers) frame: 'html, body', // The offset from the top of the element. offset: 0, // The animation time in microseconds. speed: 1000, // Animation effect. (http://www.easings.net) easing: 'swing' // Enable fragment in URL. enableFragment: false, // Enable animation chain. The browser will execute all the events in stead of ignoring event during animation. enableAnimationChain: false, // Call function on start. onStart: function() {}, // Call function on complete. onComplete: function() {} });
Tagged with:
fragment scroll
fragment link
scroll animation
descendants
fragment
jquery fragment
scroll
jquery plugin
Related Articles