jquery - Cannot use scrollTo offset when using window.location.hash -
i have single page site position: fixed;
header containing main nav. i'm using this plugin smooth scroll each section via main nav. because of fixed header need set offset
= height of header. works fine using initialisation:
$('.nav-main a').click(function(e) { e.preventdefault(); var anchorlocation = $(this).attr('href'); $.scrollto(anchorlocation, 700, { offset: -86 }); });
but need url include section id e.g. http://domainname.com/#about each link has in it's href
e.g. <a href="#about">about</a>
use this:
$('.nav-main a').click(function(e) { e.preventdefault(); var anchorlocation = $(this).attr('href'); $.scrollto(anchorlocation, 700, { offset: -86, onafter: function() { window.location.hash = anchorlocation; } }); });
so fixes url screws header in disappears once smooth scroll has finished come view if scroll again , offset
doesn't work. ideas?
edit
someone posted below solution removed works in terms of not having use plugin offset
works in webkit browsers (chrome, safari) in ie 8/9 & firefox once scrolling animation has stopped honour offset
millisecond snap top of viewport.
var headerheight = $('[role="banner"]').outerheight() -1; $('.nav-main a').click(function(e) { e.preventdefault(); scrolltoid($(this).attr('href')); }); function scrolltoid(id){ $('html, body').animate({ scrolltop: $(id).offset().top - headerheight }, 700, function() { window.location.hash = id; }); }
Comments
Post a Comment