jquery - 从 url 哈希调用页面时，水平滑块容器位置向上

Question

如果您在此处查看页面 @ http://8020indie.com/wp-content/uploads/TEC/，您会看到一切正常，但是当您访问带有哈希的页面时，例如http://8020indie.com /wp-content/uploads/TEC/index.htm#content2，内容 div 的水平定位关闭。任何想法将不胜感激。谢谢

$(document).ready(function(){
    var width = '1000';
    var slides = 3;
    $('.main_inner').css({
        width: slides * width,
    });
    $('a.tab_link').click(function(){
        var contentNum = $(this).attr('rel');
        var marginToScroll = width * contentNum - width;
        $('.main_inner').animate({
        marginLeft: '-' + marginToScroll,
        }, 1000);
        return false;
    });
    jQuery('#parallax1').jparallax({mouseport:jQuery('#content1')},{xtravel: '15px',                     ytravel: '0px'},{xtravel: '15px', ytravel: '0px'}, {xtravel: '15px', ytravel: '0px'});
    jQuery('#parallax2').jparallax({mouseport:jQuery('#content1')},{xtravel: '15px', ytravel: '0px'},{xtravel: '15px', ytravel: '0px'}, {xtravel: '15px', ytravel: '0px'});
    jQuery('#parallax3').jparallax({mouseport:jQuery('#content1')},{xtravel: '15px', ytravel: '0px'},{xtravel: '15px', ytravel: '0px'}, {xtravel: '15px', ytravel: '0px'});
});

function changeMySrc(i) {
    if (i == 1) {
        document.getElementById("ui_tab").src="images/buttonUiOn.png";
        document.getElementById("design_tab").src="images/buttonDesignOff.png";
        document.getElementById("integration_tab").src="images/buttonIntegrationOff.png";
    }
    if (i == 2) {
        document.getElementById("ui_tab").src="images/buttonUiOff.png";
        document.getElementById("design_tab").src="images/buttonDesignOn.png";
        document.getElementById("integration_tab").src="images/buttonIntegrationOff.png";
    }  
    else if (i == 3) {
        document.getElementById("ui_tab").src="images/buttonUiOff.png";
        document.getElementById("design_tab").src="images/buttonDesignOff.png";
        document.getElementById("integration_tab").src="images/buttonIntegrationOn.png";
    }
}

Answer 1

As you probably know, if the hash matches the name of an "a" tag, such as <a name="content2"/> , the browser would scroll down to it automatically.

In HTML5, if the hash matches the ID of any DOM object, the browser will scroll down to it.

That's not exactly what's happening here, but my guess is that the final position of your content2 div is getting messed up due to that auto-scrolling. Do you really have to use a hash that matches the ID of the div? To avoid that, for example, you can use window.location.hash and map that to the actual div ID.