Last active
September 11, 2021 13:16
-
-
Save flesler/3f3e1166690108abf747 to your computer and use it in GitHub Desktop.
Anchor navigation powered by jquery.scrollTo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Include jQuery from somewhere, must use version 1.8 or above --> | |
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> | |
<!-- Include latest jquery.scrollTo, can download from https://github.com/flesler/jquery.scrollTo/releases --> | |
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script> | |
<!-- Initialize the plugin, the contents of the script can be inlined here, of course --> | |
<script type="text/javascript" src="js/init.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// You can avoid the document.ready if you put the script at the bottom of the page | |
$(document).ready(function() { | |
// Bind to the click of all links with a #hash in the href | |
$('a[href^="#"]').click(function(e) { | |
// Prevent the jump and the #hash from appearing on the address bar | |
e.preventDefault(); | |
// Scroll the window, stop any previous animation, stop on user manual scroll | |
// Check https://github.com/flesler/jquery.scrollTo for more customizability | |
$(window).stop(true).scrollTo(this.hash, {duration:1000, interrupt:true}); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Great little snippet, much appreciated!