smoothscroll issue

[lsg1r]

I'm having one of those days where things are just not doing what I want them to do

Trying to get a smoothscroll to work but it's just not liking me for some reason and it's even more annoying when it's worked before on another site design I've used it on The only difference is that I've now got a sticky header and sub nav section.

Anchors are all working as they're supposed to, ie it scrolls the 'text part' to where it's linked but it doesn't have the offset and smoothscroll (script would fix this).

Layout of site is (id's in brackets)

div (header) with nav (id)
div (sub-nav) with nav (sub-menu) linking to anchors
div ("wrapper") with class (white) - "wrapper" is different on each page although that can be changed to the same if needed.
div (anchor)
div (anchor 2)....

jquery script I've used that worked before is below... am I missing something completely obvious to get this to work

$(document).ready(function() { 

// Click event for any anchor tag that's href starts with # 
$('a[href^="#"]').click(function(event) { 

// The id of the section we want to go to.         
var id = $(this).attr("href"); 

// An offset to push the content down from the top.         
var offset = 75; 

// Our scroll target : the top position of the         
// section that has the id referenced by our href.         
var target = $(id).offset().top - offset; 

       
 // The magic...smooth scrollin' goodness.         
$('html, body').animate({scrollTop:target}, 500); 

        
//prevent the page from jumping down to our section.         
event.preventDefault();

 }); 
});

As a side note: does anyone know of a way to adjust offset to em's rather than pixels, my headers are in em's rather than percent/pixels so they scale with the text etc?

Thanks in advance

 

[GravyMonster]

There's nothing obviously wrong with your code at all. When you say 'it doesn't work', what does it actually do? Have you checked the console for errors elsewhere in code which could be affecting it?

Could you set up a working example in http://jsfiddle.net so we can see the exact state f the page.

 

[lsg1r]

Sods law... I was going to upload a page to show it not working and like you do check it first and now it's working now...typical lol

Checked another page and it still wasn't working so compared them and it looks like a another script was conflicting and causing issues... thanks for the help and confirming it was ok

Now if I can just sort out a way to convert the pixel offset to em's all good in the world lol

 

[GravyMonster]

Always the way

You can get the height from your header, something like:

var offset = $('#myHeader').height();

jQuery will automatically convert the em value in your CSS to a pixel value which can be used with offset().top

 

[lsg1r]

Oooh never knew about that approach (javascript newbie )....only ever knew about pixels...

That works a treat with the scroll but it's a little close to the sub nav, is there any way of adding in the depth of the 'sub-nav' or a small offset to that?

Actually... thinking about it I could just stick a wrapper around the header and sub-nav as that would work I assume.

Must say, thank you very much

 

[Tripnologist]

That works a treat with the scroll but it's a little close to the sub nav, is there any way of adding in the depth of the 'sub-nav' or a small offset to that?

var headerHeight = $('#myHeader').height();
var subHeaderHeight = $('#mySubHeader').height();
var offset = headerHeight + subHeaderHeight;

 

[lsg1r]

fantastic

thanks very much all sorted now