Question

I’m using the Pagify.js plugin, which helps create one page websites by using jquery to pull several html files inside a container div without the browser having to refresh the whole page.

The problem is that I’m trying to scroll to the nav bar div when a link is clicked, and I’m getting odd results. Here is the plugin and HTML jsfiddle. Here is the code I’m using to scroll (I’m not sure where to put it)

$('html, body').animate({scrollTop:$('#nav').position().top});

http://jsfiddle.net/5y9HT/

If I paste the scrollTop code in different places in the pagify.js, different things happen, none of which behave exactly right.
I’m trying to achieve a situation where it will scroll to the nav div if a link is clicked, but will not scroll if the browser is refreshed (it should already be there. Just like on this site: http://www.madebysofa.com/archive/index.html

Answer 1

I think you want #nav’s offset, not it’s position:

$('.content').on('click', 'a', function(a){
    a.preventDefault();
    $('content').get('newPage.html');
    var nav_position = $('#nav').offset();
    console.log(nav_position);
    $(document).animate({
         scrollTop: nav_position + 'px';
    });
});

You might still be able to use your position().top in the same manner.

$('.content').on('click', 'a', function(a){
    a.preventDefault();
    $('content').get('newPage.html');
    var nav_position = $('#nav').position().top;
    console.log(nav_position);
    $(document).animate({
         scrollTop: nav_position + 'px';
    });
});