-
-
Save HoundstoothSTL/5510082 to your computer and use it in GitHub Desktop.
(function($) { | |
$('a[href*=#]:not([href=#])').click(function() | |
{ | |
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') | |
|| location.hostname == this.hostname) | |
{ | |
var target = $(this.hash), | |
headerHeight = $(".primary-header").height() + 5; // Get fixed header height | |
target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); | |
if (target.length) | |
{ | |
$('html,body').animate({ | |
scrollTop: target.offset().top - headerHeight | |
}, 500); | |
return false; | |
} | |
} | |
}); | |
})(jQuery); |
This is working great for href="#zyz" links, but not for href="/abc#zyz" - why not?
Awesome! Thank you so much 👍
@biwerr - your code work very well, but could you explain you code? I like understand how it work
Many, many thanks for this!
Just recently noticed this script error on my site --
Syntax error, unrecognized expression: a[href*=#]:not([href=#])
The quick update for line 2 in this gist is:
$('a[href*=\\#]:not([href=\\#])').click(function()
I personally don't think this is an efficient way!
Better know the height of header and do add the following in your css
.offset{margin-top: -5em !important; padding-top: 5em !important;}
and add the class offset to the desired html element.
NB: Obviously change 5em to your header height!!
Thank you,
But you could simply replace target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
by target = $(this).attr('href');
Anyway, it works for me
For Scroll to anchor on page load