scrollto animation not working

[turpentyne]

I have a script that loads in content using jquery. With the popstate/pushstate function everything is working beautifully, when they click on navigation links. But I also have some a href tags on one of the loaded pages for sliding down to anchor points on the page. This seems to run the popstate/pushtate animation, instead of just animating down the page, like I want.

I think it's caused by the window popstate function at the end of the script for loading content. The page reloads, rather than recognizing it was just a hash to an anchor on the page. I'm not sure how to work around it.

here's my problem page that gets loaded into index.php

<script type='text/javascript' src='js/dynamicpage.js'></script>

<a href="#down1" id="a_1" class="portfolio_links">
                <img src="images/portfolio/PortfolioBtnImage1_b.jpg" class="portfolio_thumbs" data-color="images/portfolio/PortfolioBtnImage1_a.jpg" data-bw="images/portfolio/PortfolioBtnImage1_b.jpg">
            </a>     

            <a href="#down2" id="a_2" class="portfolio_links">
                <img src="images/portfolio/PortfolioBtnImage2_b.jpg" class="portfolio_thumbs"  data-color="images/portfolio/PortfolioBtnImage2_a.jpg" data-bw="images/portfolio/PortfolioBtnImage2_b.jpg">
            </a> 


            <a href="#down3" id="a_3" class="portfolio_links">
                <img src="images/portfolio/PortfolioBtnImage3_b.jpg" class="portfolio_thumbs"  data-color="images/portfolio/PortfolioBtnImage3_a.jpg" data-bw="images/portfolio/PortfolioBtnImage3_b.jpg">
            </a>

<a name="down1" id="position_1"> 
        <p>Below is where the slideshow should be showing</p>
    </a>
    <br/><br/><br/><br/><br/><br/>
    <a name="down2" id="position_1"> 
        <p>Below is where the slideshow should be showing</p>
    </a>
<br/><br/><br/><br/><br/><br/>
<a name="down3" id="position_1"> 
        <p>Below is where the slideshow should be showing</p>
    </a>

the script for the scroll down is simple:

// 'scroll to' code

$('.portfolio_links').live('click', function(){ 

    $('.portfolio_links a').preventdefault();

    var whichTag = $(this).attr('id');
    val = whichTag.split("_");
    thisTag = "#position_"+val[1];

    $('html, body').animate({scrollTop: $(thisTag).offset().top - 100}, 2000);

});

And here's the loading script that is causing the problem:

$(function() {

    if(Modernizr.history){

    var newHash      = "",
        $mainContent = $("#main-content"),
        $pageWrap    = $("#page-wrap"),
        baseHeight   = 0,
        $el;

    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();

    $("#main_nav").delegate("a", "click", function() {
        _link = $(this).attr("href");
        history.pushState(null, null, _link);
        loadContent(_link);
        return false;
    });

    function loadContent(href){
        $mainContent
                .find("#guts")
                .fadeOut(700, function() {
                    $mainContent.hide().load(href + " #guts", function() {
                        $mainContent.fadeIn(300, function() {

                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("#main_nav a").removeClass("current");
                        console.log(href);
                        $("nav a[href$="+href+"]").addClass("current");


                            $.getScript("js/carousel2.js", function(data, textStatus, jqxhr) {
                                console.log(data); //data returned
                                console.log(textStatus); //success
                                console.log(jqxhr.status); //200
                                console.log('Load was performed.');
                                });

                            $.getScript("js/jquery.carouFredSel-6.2.1-packed.js", function(data, textStatus, jqxhr) {
                                console.log(data); //data returned
                                console.log(textStatus); //success
                                console.log(jqxhr.status); //200
                                console.log('Load was performed.');
                                }); 

                    });
                });
    }

    $(window).bind('popstate', function(){
       _link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
       loadContent(_link);
    });

} // otherwise, history is not supported, so nothing fancy here.


});

I think it's caused by the window popstate function at the end of the script for loading content. The page reloads, rather than recognizing it was just a hash to an anchor on the page.

Does it happend on all browsers?

I'm leaning more on the href issue rather the popstate() function.

This line:

$("nav a[href$="+href+"]").addClass("current");