jcueryのスライドするナビゲーションについて3

質問

http://okwave.jp/qa/q6836508.htmlにて質問させて頂き、
回答者さまから教えてもらった方法で、ナビゲーションを設置いたしました。

デモ
http://okwave.xrea.jp/jquery/test6836508/

単体では問題なく動いたので回答をしめきってしまったのですが、
別のスクリプトによって、
アンカーがURLに読み込まれず、ブラウザの更新ボタンを押すと
コンテンツだけが止まったまま
スライドはTOPに戻ってきてしまいます。
※同一ファイル内でのコンテンツ移動です。

どうやら、別で使用している下記のスクリプトのせいで
そのようになってしまうようです。
これを外すと、URLにアンカーがつきます。

ただ下記のスクリプトはコンテンツの移動の際に使用しているもので
外すことはできないので、対処法がお分かりの方がおられましたら
お教え頂けないでしょうか。

宜しくお願いいたします。

<script type="text/javascript">
$(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);
event.preventDefault();
});
});
</script>

回答No.1

fujillin · ベストアンサー

最初のご質問が『両方使っている』ようなご質問でしたが、どのように両立させているの不明でした。
（そのままだと、ドキュメント全体が横スライドするので、メニュー部分が表示されなくなってしまう）

対策としては、メニューをフロートさせて常に表示しておくか、
webSiteScrollingの方をdiv内などでスクロールするようにするか、
あるいは横に長～～～いメニューにしてあるのか・・・・　（笑）

いずれにしろ、更新ボタンを押すと最初のソースがリロードされるので、それまでの状態を継続したいのであれば、その状態をどこかに記憶させておく必要があります。（HTMLドキュメント内はクリアされてしまうので、それ以外に）

前回、回答者様の案はリンク機能を利用して、ロケーションのハッシュ部分（#以降）に記録しておくという方法でした。
しかし、（前回、質問者様もお気付きのように）ハッシュ部が更新されないので、その記録が残らないということが起きています。
具体的には、webSiteScrollingのスクリプトの方でアンカータグのリンク機能ををキャンセルしてしまっていることが原因と言えます。

webSiteScrollingのスクリプトの event.preventDefault(); がその部分に当たっていますが、そこを削除するとメニューの方は問題なくなるものの、多分、event.preventDefault();のスクロールの動きが一瞬おかしくなる可能性があります。（うまく行くかも知れません）
どのような形で両者を実装しているのかが不明なのでわかりませんが、ハッシュ部分に記録しておく代わりに、クッキーに表示中のメニュー位置を記録しておくなどの方法に変えれば可能になると思います。
（クッキーだと「拒否」設定をしているユーザもいますが…）

クッキーの使用方法の解説サイト
（なんか、escape、unescapeを使っているとこしか見つからなかった…）
http://ash.jp/~hasimoto/zakki/new_jsck.htm
http://www.red.oit-net.jp/tatsuya/java/cookie.htm
（エンコードはencodeURIComponent() などを）

jqueryを利用しているのだから、cookie.js を利用した方が簡単かも知れません。
http://www.softel.co.jp/blogs/tech/archives/1135

お礼

ご回答ありがとうございます！

event.preventDefault();を削除してみたら、
URLにアンカーがつくようになりました！！

メニュー部分は、CSSでfixedで固定していて、
コンテンツ自体を横スクロールさせるようにしています。

たった一行がじゃましていたとは。。

とにかく思うように全て実現することができました！！！

クッキーの使用についても今後のため
チェックしておきます！

本当にありがとうございました！