[Kris BParticipant]

Hi,

I’m trying to have a bulleted icon list at the top of a page, and each list item is a link to a different div down-page. My problem is that, at least in Chrome browser, when I jump to an ID’d div, the navbar header covers the top of that div, which may be pertinent info, like header text.

How can this be fixed or worked around? If there’s a way to go down to x ems above the div? Any ideas welcome!

Here’s a page where I tried this, on a div ID’d “liability”.

[RadModerator]

Hi Kris,

Thank you for writing in!

Try adding this at your customizer’s custom javascript.

jQuery(function($){
  $(document).ready(function(e){
    $('html,body').animate({
      scrollTop: $('#' + location.href.split("#").slice(-1)[0] ).offset().top - $('.x-navbar').height()
    },700 ,'swing');
  });
});

Hope this helps.

[Kris BParticipant]

Thank you, much better!

It still goes down a little past the top of the ID’d div (maybe 2ems), but much improvement. Can I play with that 700 number in the script, or is that for something else? Or do I try changing “slice(-1)” to “slice(-1.25)”? I don’t know javascript so forgive my ignorance on what the adjustments are.

Is this code something I could paste into the functions sheet of my child theme? I just always want to get stuff away from the customizer fields so I don’t fill them up with snippets.

Thanks again!

[AlexanderKeymaster]

Hi Kris,

I checked your page, and it looks like the scroll is perfectly moving the bottom of the navbar to the top of the div.

Instead of changing the navigation, I would recommend placing the liability ID on the custom headline element instead of the div. This will move it a bit further down the page.

I wouldn’t advise changing that code, because it would affect all instances of this effect we’re adding. So it you have other anchors used for navigation, it affects them too.

But to answer your question, and explain what’s going on in that javascript a bit.

This expression grabs the value of the address bar, and splits after the #
location.href.split("#").slice(-1)[0]

That value is used to find the target ID’s location on the page. So based on the previous information, it simplifies to this:

$('#' + anchor ).offset().top

But that leaves us with the same problem as before. We need to subtract the height of the navbar:

$('.x-navbar').height()

That finds the navbar, and returns it’s height. Then it’s subtracted from the target ID elements position, and the scroll is executed.

To change the scroll offset, you can add or subtract at the very end of that line. You could also change the selector for the navbar to something else. For example:
$('#' + location.href.split("#").slice(-1)[0] ).offset().top - $('.x-navbar').height() + 40

[Kris BParticipant]

Thanks for that detailed explanation! Very helpful.

My navbar was still encroaching a little further down the div to almost the headline element. I haven’t checked it again yet, but I’m pretty sure I have 1em of top padding in the parent (ID’d) div, so if I went to that anchor, it would theoretically also be overshooting, right? But I did log out of WP admin to get rid of that black bar at the top, because it seemed like that was the amount it was overshooting. Maybe it is? And I should clear cache and wait for it to update as I’m logged out to check it out?

Again, you guys are great help, much appreciated – first time purchasing premium themes, and very satisfied.

[AlexanderKeymaster]

Hi Kris,

Ah, that would be it. The script doesn’t take into account the additional height of the WordPress toolbar. When logged out, does it work correctly? If I check your site it looks just fine to me now that the code is in place.

[Kris BParticipant]

I think that was it. I cleared my cache plugin and logged out and it seems to work great.

Thanks for that!

[ChristianModerator]

Glad it’s working now Kris.

[Author]

Posts