0

これが私が取り組んでいるサイトです：http：//defend-foreclosure.com

http://defend-foreclosure.com/law.htmlにアクセスし、ナビゲーションの「Law」のドロップダウンリンクをクリックすると、アンカーが完全に機能していることがわかります。各セクションのタイトルがヘッダーの後ろに隠れていましたが、次のスクリプトをhtmlファイルに追加することで問題を修正しました。

<script>
  $().ready(function(){
    // Fixing Anchor links nav leaving the destination text hidden under Header    
    $(window).hashchange(function() {
      var hash = "#" + location.hash.replace(/[^A-Za-z0-9_\-]/g, "");
      if (hash && $(hash).offset()) {
        var pos = $(hash).offset().top - 55;
        $(window).scrollTop(pos);
      }
    });
  });
</script>

law.html以外のページからアンカーの1つに移動しようとすると、問題が発生します。これは、普遍的にではなく、.haschangeでのみ機能するスクリプトと関係があると思います。

ホーム、アバウト、または連絡先に移動し、ドロップダウンのアンカーの1つをクリックしようとすると、ナビゲーションの下のセクションのタイトルが途切れていることに気付くでしょう。すべてのページでこれを正しく機能させる方法を知っている人はいますか？

編集：

.haschangeの外に次のコードを追加し、その後にアラートを追加すると、正しく機能し、アラートが表示されます。[OK]をクリックすると、混乱してタイトルが再び非表示になります。

<script>
    var hash = "#" + location.hash.replace(/[^A-Za-z0-9_\-]/g, "");
          if (hash && $(hash).offset()) {
            var pos = $(hash).offset().top - 55;
            $(window).scrollTop(pos);
          }
</script>

編集：law.htmlページでスクリプトを次の3行に絞り込みました。

<script>
    var shiftWindow = function() { scrollBy(0, -50) };
    if (location.hash) shiftWindow();
    window.addEventListener("hashchange", shiftWindow);
</script>

これにより、law.htmlページにある場合にのみ関数が正しく機能します。別のページからナビゲーションのアンカーをクリックしても、まだ機能しません。

4

1 に答える 1

0

これはきれいではありませんが、Chromeはページ読み込みイベントの後にページの配置をトリガーするようです。だから私が見つけた唯一の方法はタイムアウトを使うことです

<script>
    $(function(){
        setTimeout(function(){
            var shiftWindow = function() { scrollBy(0, -50) };
            if (location.hash) shiftWindow();
            window.addEventListener("hashchange", shiftWindow);
        },10);
    })
</script>

IDの設定を解除して（ブラウザはスクロールする場所を見つけられません）、手動でスクロールすることもできますが、後でIDをリセットする必要があり、タイムアウトを使用しない場合は後はありません

編集 ：

この関数を他のイベントでも使用できるようにするには、スクロールを絶対にする必要があります。一部のブラウザーでは、イベントフローが完全に同じではなく、2回トリガーされる可能性があるためです。

<script>
    $(function(){
        setTimeout(function(){
            var shiftWindow = function() { 
                var hash = "#" + location.hash.replace(/[^A-Za-z0-9_\-]/g, "");
                if (hash && $(hash).offset()) {
                    var pos = $(hash).offset().top - 55;
                    $(window).scrollTop(pos);
                }
             };
            if (location.hash) shiftWindow();
            window.addEventListener("hashchange", shiftWindow);
        },10);
    })
</script>
于 2012-09-17T23:33:53.427 に答える