1

私は、さまざまなコンテンツがさまざまな垂直方向に拡大するdiv内に配置されている1ページのWebサイトで作業しています。divを展開すると、すでに開いているdivは自動的に閉じます。また、特定のコンテンツがブラウザーの上部から90ピクセルの位置に配置されるように、ページをスクロールする必要があります。

各divに単純なアンカーリンクを使用することで、これはほとんどの場合完璧に機能します。ただし、展開されたコンテンツによってWebサイトの高さが高くなると、アンカーが「停止点」を誤って計算し、ユーザーが間違った場所にスクロールされることがあります。特に、すでに開いているdivとは別のdivを直接拡張する場合。別の質問で、レイアウトが予期せず変更されたアンカーリンクを使用する場合にこれが発生することがあると読みました。誰かがこれを回避する方法を知っていますか？ビューポートの上部を基準にして新しいコンテンツの位置を「絶対に」スクロールする方法はおそらくありますか？または、アンカーに少し辛抱強く、すべてのコンテンツが読み込まれるのを待ってから離陸するように要求できますか？

また、モバイル画面や小さな画面の訪問者がフルサイズの画像をロードする必要がないように、jqueryは訪問者の画面サイズをチェックし、正しい画像を含む対応するhtmlファイルをにロードします#picswitend。これはおそらく問題の一部でしょうか？

展開するdivの1つのコードは次のとおりです。jQueryを初めて試したので、少し洗練されていないかもしれませんが、機能します。

CSS：

  .anchorlink {
  position:absolute;
  margin-top: -90px;
  }

のコード<head>：

  <head>
     <script>
        open = '';
        active = '';
        $(document).ready(function () {
        $('#closeinfo').hide();
        $('#closethis').hide();
        $('#faq').hide();
        $('#infomore').hide();
        $('#witsend').hide();
        });
     </script>
  </head>

展開するdivの1つの例：

  <div class="text">
  <a name="witsendlink" class="anchorlink"></a>
  <a href="#witsendlink" id="witsend-show">
  <script>
     $("#witsend-show").click(function() {      
        $('#' + active).hide();
        $('#' + active + '-show').show();
        $('#infomore').slideUp(200);
        $('#witsend-show').hide();
        $('#witsend').show();
        active = "witsend";
    $('#closethis').show();
    $('#faq').hide();

    if($(this).width() <= 568){
       $("#picswitsend").load("witsendpicsm.html");
    } else {
       $("#picswitsend").load("witsendpics.html");
    }

    $('#witsendtitle').scrollToFixed({
       marginTop: $('#top').outerHeight() - 44,
       limit: function() {
          var limit = $('#lastwitsend').offset().top;
          return limit;
       },
          zIndex: 999,
       });      
        });
  </script>
  <div class="title">
     <p>Wits End Discography</p>
  </div>
  <div class="content">
     <p>Siste Sukk tapes & records is a small oslo-based independent label focusing on emo and hardcore, releasing most of their music on tape. When we made the cassette-cover for Wits End's latest release, we wanted to let an unconventional use of material play a major role in the design.
     </p>
  </div>
  </a>

  <div id="witsend">
  <div class="post">

     <div id="witsendtitle">
    <a href="#top" id="witsend-hide">
       <script>
          $('#witsend-hide').click(function () {
                 $('#witsend').hide();
         $('#witsend-show').show();
         $('#closethis').toggle();
         active = '';
      });
       </script>
       <p class="titletext">
          <p class="exit">&#10005;</p> Wits End Discography
       </p>
        </a>
     </div>

 <div class="content open">
    <p>
  <a href="http://www.sistesukk.com">Siste Sukk tapes & records</a> is a small oslo-based independent label focusing on emo and hardcore, releasing most of their music on tape. When we made the cassette-cover for Wits End's latest release, we wanted to let an unconventional use of material play a major role in the design. Basing the cover on a piece of folded newsprint and a and a small plastic bag, it pays respect to old school zine-culture while still keeping a sense of contemporariness and distinction in a scene heavily influenced by D.I.Y solutions.

  Memento mori!<br><br>In collaboration with <a href="http://www.martinmartin.no">Martin Asbj&oslash;rnsen</a>
        </p>
    <p class="small">2012 &middot; Commissioned &middot; <a id="perma" href="http://www.jonasersland.net/index.php?section=witsend#witsend">Permalink <span id="flag"> &#9873;</span></a>
        </p>
     </div>
  </div>        
  <div id="picswitsend">
  </div>                
  </div>
  </div>

誰かがこれについて考えてくれて本当にありがたいです、そして私が少なすぎるか無関係な情報を含めてしまったら申し訳ありません。何かありましたらお気軽にお問い合わせください。喜んでお答えします！

絶対に素晴らしい一日を。

編集：これが実際のサイトです：http：//www.jonasersland.net

4

1 に答える 1

0

jQueryメソッドscrollTopを使用して、ブラウザーの上部から90ピクセル下まで「絶対に」スクロールできます。また、 http：//api.jquery.com/scrollTop/で簡単に起動できるようにアニメーション化できます。あなたがやろうとしていることは次のようになります：

$("#linkTopAnchor").click(function() {
    $(this).blur();
    $("html, body").animate({scrollTop: "90px"}, "fast");
    return false;
});

一部のモバイルデバイスは現在強調表示されているものに自動的にスクロールするため、使用$(this).blur();しています。手動で選択を解除しない場合、ページは目的の場所にスクロールしてから、イベントを開始したボタンにジャンプして戻ります。return false;URLがハッシュタグに変わるのを防ぐためにそこにいます。あなたの場合、URLを実際に変更したいので、それを削除するだけです。

于 2013-01-11T19:17:22.263 に答える