Skip to content

Instantly share code, notes, and snippets.

@flesler

flesler/index.html

Last active May 15, 2021
Embed
What would you like to do?
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});
});
});
@arendon1

This comment has been minimized.

Copy link

@arendon1 arendon1 commented May 16, 2016

Just the thing i needed, thank you for this.

@connected-ndey

This comment has been minimized.

Copy link

@connected-ndey connected-ndey commented Jul 28, 2016

This script doesn't work for href="#", only for href="#someString" (tested using scrollTo v2.1.2)

@flesler

This comment has been minimized.

Copy link
Owner Author

@flesler flesler commented Oct 11, 2016

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

@nickfmc

This comment has been minimized.

Copy link

@nickfmc nickfmc commented Dec 10, 2016

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

@nickfmc

This comment has been minimized.

Copy link

@nickfmc nickfmc commented Dec 10, 2016

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

@Pomsou

This comment has been minimized.

Copy link

@Pomsou Pomsou commented Jan 23, 2019

works perfect, thanks!

@dvigne

This comment has been minimized.

Copy link

@dvigne dvigne commented Jan 5, 2020

Great little snippet, much appreciated!

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