-
-
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); |
AWESOME INDEED. Thanks!
Thanks so much for sharing this! Fantastic function :)
Hi :)
My site is keep jumping up an down??
Can you help?
Site: http://speakersclub.dk/event-kursus/pre-netvaerksmoede-for-deltagere-til-elevate2015/
My js code: http://rebornincorporated.com/share/2015-10-18_01-14-39.png
Thanks a lot!
Kevin :)
Great solution, just thought I'd share this with you all: if it doesn't work, just comment the # signs in the first line of the function. OR replace this:
$('a[href*=#]:not([href=#])').click(function()
with this:
$("a[href*=\\#]:not([href=\\#])").click(function()
For Scroll to anchor on page load
function scrollToAnchor(hash) {
var target = $(hash),
headerHeight = $(".navbar-fixed-top").height() + 5; // Get fixed header height
target = target.length ? target : $('[name=' + hash.slice(1) +']');
if (target.length)
{
$('html,body').animate({
scrollTop: target.offset().top - headerHeight
}, 100);
return false;
}
}
if(window.location.hash) {
scrollToAnchor(window.location.hash);
}
$("a[href*=\\#]:not([href=\\#])").click(function()
{
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname)
{
scrollToAnchor(this.hash);
}
});
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
YOU ARE AWESOME
thank you and have a great day