別ページからのアンカーリンクについて

質問

現在、下記jqueryを使用して横スクロールサイトを制作中です。
http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/

上記サイトを参考に
設置し問題なく動作しているのですが、

アンカーリンクを使用して
別ページから、各コンテンツにジャンプさせたいと思っています。

設置しているナビゲーションメニューからだと
スムーズにスクロールし、正常に動作（コンテンツが一番左の位置でストップ）するのですが、
別ページから　○○.html#アンカーリンク名　というふうに
リンクを張ると、表示位置が一番左の位置ではなく
スクロールの途中でずれて止まってしまいます。

CSSも含め色々といじってはみたのですが
まったく原因がつかめず苦戦しております。。

以下のスクリプトでは、ナビゲーションのリンクをクリックすると
動作するようにしていますが、
アンカーリンク名が○○の場合は、○○に表示させる
といった命令のようなことはできるのでしょうか？

知識不足で申し訳御座いませんが
お分かりの方がおられましたら宜しくお願いいたします。

$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
/*
if you want to use one of the easing effects:
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500,'easeInOutExpo');
*/
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);

});
});

回答No.1

kuzumiHK

ご提示いただいているサンプルデモのページでは問題なく一番左に表示されますね。

http://tympanus.net/Tutorials/WebsiteScrolling/#section2

ちなみにアンカーをつけているタグに、style="border:1px solid #f00"を追記したとき、
赤いボーダーの左は画面のどの位置に来ますか？

<h2 id="section2" style="border:1px solid #f00">タイトル</h2>

補足

こちらでもご回答頂いていてありがとうございます！！

各コンテンツのID名をbox01～box05だとし、
試しにbox03のブロックにstyle="border:1px solid #f00"を追記し
アクセスしてみました。

ブロックがそのままブラウザの左ではなく右側に配置される形です。。

各ブロックのIDにクラス名.sectionをつけて
CSSを下記のように設定しています。
javascriptではなく、コンテンツの中身のCSSなどが原因しているのでしょうか。。

body {
background-image: url（images/haikei.gif);
background-repeat: no-repeat;
background-position: left bottom;
position:absolute;
width: 5000px;
left: 0px;
top: 0px;
bottom:0px;
height: 100%;
vertical-align: middle;
margin: 0px;
padding-top: 0px;
}
.section {
width:1000px;
height:100%;
padding: 0px;
float: left;
margin:0px;
bottom:0px;}