Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
In-page nav, with smooth scrolling, update on scroll, and proper location.hash updating
$(document).ready(function() {
$("#in-page-nav-1 a").click(function(e){
e.preventDefault();
var dest = 0;
if ($(this.hash).offset().top > $(document).height()-$(window).height()){
dest = $(document).height()-$(window).height();
} else {
dest = $(this.hash).offset().top;
};
$('html,body').animate({scrollTop: dest}, 1000,'swing');
location.hash = $(this).attr("href");
updateInPageNav($(this).attr("href"));
});
});
$(window).load(function() {
updateInPageNav(document.location.hash);
});
$(window).scroll(function() {
checkForNewSection();
});
function updateInPageNav(hash) {
var expectedNavElement = $("#in-page-nav-1 a[href='" + hash + "']");
if (expectedNavElement.length != -1) {
$("#in-page-nav-1 li").removeClass("active");
$(expectedNavElement).parent().addClass("active");
};
};
function checkForNewSection() {
var inview = "#" + $('.hero-photo:in-viewport:first').attr('id'),
$link = $('#in-page-nav-1 li a').filter('[hash=' + inview + ']');
console.log(inview);
if (inview != "#undefined") {
updateInPageNav(inview);
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.