smoothscroll issue

Soldato
Joined
25 Jan 2007
Posts
4,738
Location
King's Lynn
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 :rolleyes: 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
Code:
$(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 :)
 
Last edited:
Soldato
OP
Joined
25 Jan 2007
Posts
4,738
Location
King's Lynn
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
 
Soldato
OP
Joined
25 Jan 2007
Posts
4,738
Location
King's Lynn
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 :)
 
Back
Top Bottom