Instantly share code, notes, and snippets.

@flesler /index.html
Last active Dec 28, 2017

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.

Show comment
Hide comment
@arendon1

arendon1 May 16, 2016

Just the thing i needed, thank you for this.

arendon1 commented May 16, 2016

Just the thing i needed, thank you for this.

@connected-ndey

This comment has been minimized.

Show comment
Hide comment
@connected-ndey

connected-ndey Jul 28, 2016

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

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.

Show comment
Hide comment
@flesler

flesler 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

Owner

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.

Show comment
Hide comment
@nickfmc

nickfmc 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 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.

Show comment
Hide comment
@nickfmc

nickfmc Dec 10, 2016

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

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.

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