Skip to content

Instantly share code, notes, and snippets.

@flesler
Last active September 11, 2021 13:16
Show Gist options
  • Select an option

  • Save flesler/3f3e1166690108abf747 to your computer and use it in GitHub Desktop.

Select an option

Save flesler/3f3e1166690108abf747 to your computer and use it in GitHub Desktop.
Anchor navigation powered by jquery.scrollTo
<!-- 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>
// 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});
});
});
@flesler

flesler commented Oct 11, 2016

Copy link
Copy Markdown
Author

@connected-ndey href="#" is not a case that should be matched as there's no ID in there indicating where to scroll to

@nickfmc

nickfmc commented Dec 10, 2016

Copy link
Copy Markdown

doesn't seam to work on IOS devices, any browser? it just trigger a scroll of the page a tiny amount.

@nickfmc

nickfmc commented Dec 10, 2016

Copy link
Copy Markdown

seams to just be the interrupt:true setting that doesn't work on iOS changing this to false fixes the issue.

@Pomsou

Pomsou commented Jan 23, 2019

Copy link
Copy Markdown

works perfect, thanks!

@dvigne

dvigne commented Jan 5, 2020

Copy link
Copy Markdown

Great little snippet, much appreciated!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment