smooth anchor link scroll, anchor point sticky header compensation, etc.

[andyjoe81]

I’m about to launch my site, but I have three pressing issues that I can’t seem to get to the bottom of and I’m hoping one of you generous people could help me out.

1) I can’t seem to figure out why when I add this snippet it doesn’t do anything.

$(function() {
$(‘a[href*=#]:not([href=#])’).click(function() {
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $(‘[name=’ + this.hash.slice(1) +’]’);
if (target.length) {
$(‘html,body’).animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});

2) I’d like to compensate for the height of my fixed header when clicking on the menu anchor point links. I’ve tried so many class descriptors and nothing seems to work.

3) I’d like to have whatever anchor position I’m scrolled to have a different color background in the menu, and if possible have the color animate shift left and right as I click on each link… but that last part is completely optional.

[Shikkediel]

First obvious question – have you included the jQuery library?
Part two seems quite easy, subtracting the header height from the scroll position (reading it dynamically here) :

var header = $('#header-selector').height();

$('html, body').animate({
scrollTop: target.offset().top-header
}, 1000);

[andyjoe81]

My goodness hadn’t thought about the jquery library! Thanks for thinking of the obvious first!

I tried everything you said and what is strange is that it now seems to work fine the first time you click on a menu link, and then the next time you do it’s back to the same problems. Thoughts?

I also hadn’t thought to include my website address, which is http://www.truthisreal.org

[Shikkediel]

I see you’ve put it inside the document as a separate script but the idea was to add the variable header to the original code and replace the few lines with those accounting for the height :

$(function() {

var header = $('#header-sticky').height();

$('a[href*=#]:not([href=#])').click(function() {

if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top-header
}, 1000);
return false;
}
}
});
});

Also, the $(‘#header-selector’) should get the actual id of the header…

[andyjoe81]

I’m sorry for being such a novice, but I’m trying to figure out where the 68px header height gets punched in. Not sure if that’s what is making it still not work… that I haven’t put that in yet, but I think I otherwise fixed what you most recently said I did wrong. Thanks so very much!

http://www.truthisreal.org

[Shikkediel]

No worries, if the header’s height is fixed you could apply it directly :

$(function() {

$('a[href*=#]:not([href=#])').click(function() {

if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top-68 // right here
}, 1000);
return false;
}
}
});
});

What I had not accounted for is that the height may be set after the above function runs (so trying to get it’s height dynamically wouldn’t work yet) but accounting for it directly should trigger in any case.

[andyjoe81]

So strange. Everything is as it should be as far as I can tell but it still isn’t having any effect on the smooth scroll or the compensating for the header. Penny for your thoughts?

TruthIsReal.org

[Shikkediel]

Well, that must be something to do with the code getting parsed – if I copy and paste the original and run it on your site it seems to work.

https://css-tricks.com/snippets/jquery/smooth-scrolling/

I did notice the ampersands (&&) are transformed and a couple of backslashes missing. I am not sure where the latter got lost when I posted the previous code. Are you uploading it directly with ftp?

$(function() {

$('a[href*=#]:not([href=#])').click(function() {

if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top-68 // right here
}, 1000);
return false;
}
}
});
});

Just testing this to see what happens…

Conclusion – the backslashes get stripped from the code when posted. So please copy and paste from the link – and don’t forget to account for the 68 pixels in the correct place.

[andyjoe81]

I was simply taking your code and pasting it between within “script” inside the “head” section using the field in my theme settings that allows me to do that easily. Other suggestion?

[Shikkediel]

Very odd, now the ampersands on your page looks normal. So that should be alright then. But it’s recommended to copy the script from the smooth scrolling page itself and not from what I’ve posted in this topic – that code gets ‘cleaned’ in such a way that it won’t work anymore.

[andyjoe81]

I’ve copied the original script from the smooth scrolling page and pasted it directly into the head section via firebug and it worked, but then I pasted it directly into the header.php file, and it still doesn’t seem to parse it right. I’m going to see what plugins I can get rid of and see if that makes a difference. Any other suggestions are welcome.

[Shikkediel]

The old script is still in the document (I’d remove it) – and the new code has the closing tag > missing (you can look at the page source).

</script

Also, the 68 pixels haven’t been accounted for yet…

[andyjoe81]

I fixed the </script>, and it still didn’t work. I purposely skipped the 68px thing because I was just trying to get to the bottom of why it doesn’t work. Now I’m exploring another approach. This page has exactly what I’m looking for. Aside from the sticky menu 68px offset, it is perfect because it has both the smooth scroll as well as the highlighting of the active anchor point link. Can’t get this working either. :-(

http://trevordavis.net/blog/jquery-one-page-navigation-plugin

Sorry for taking so much of your time. Stinks not to really understand this stuff.

[Shikkediel]

The issue is only in this line :

if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) {

Unfortunately there’s now way to show the difference here because of similar parsing properties. But you can look at the page source – two backslashes are missing and the ampersands are altered. My idea would be to use ftp and circumvent the WordPress parser on your site. Or at least figure out how to get the script in the head segment correctly otherwise.
I am not familiar with WordPress so I can’t assist in any way there.

If you describe what hightlighting would be required, I’m quite sure it would only need a few extra lines to the current script instead of a plugin.

Link to the script

Whole lotta code…

[Author]

Posts