divがページのさらに下にあるにもかかわらずscrollTopが0に等しい

Question

私は2つのdivを持っています。ページの上部セクションを含むもの。もう1つはトップdivのすぐ下にあります。この2番目のdivは、ページの約1.5ビューポートです。しかし、私はしようとし、ナビゲーションボタンが押されたときに、ページを2番目のdivにスクロールさせます。それは私をページの先頭に連れて行きます。たとえそれが第2のdivのscrollTop属性を参照しているとしても。

Answer 1

scrollTopは常に0の位置になります。別のdivにスクロールする場合は、オフセットを使用してハッシュ位置までスクロールする必要があります。ブートストラップを使用している場合は、そのためにScrollSpyを使用できます。そうでない場合は、このコードを使用してハッシュ位置へスムーズにスクロールすることができます。

ハッシュはdivのIDにする必要があります。このIDは、ボタン/リンクのスクロール先のdivのIDと一致するように、ボタン/リンクのhrefを設定することでターゲットになります。

だから、あなたのリンクは次のようになります。

<a href="#somediv">Some Link</a> 

そして、あなたのdiv要素は次のようになります。

<div class="someclass" id="somediv"></div> 

そして、これは正しい位置にスクロールを処理するJS：

// Select all links with hashes 
$('a[href*="#"]') 
    // Remove links that don't actually link to anything 
    .not('[href="#"]') 
    .not('[href="#0"]') 
    .click(function(event) { 
    // On-page links 
    if (
     location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
     && 
     location.hostname == this.hostname 
    ) { 
     // Figure out element to scroll to 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
     // Does a scroll target exist? 
     if (target.length) { 
     // Only prevent default if animation is actually gonna happen 
     event.preventDefault(); 
     $('html, body').animate({ 
      scrollTop: target.offset().top -80 
     }, 1000, function() { 
      // Callback after animation 
      // Must change focus! 
      var $target = $(target); 
      $target.focus(); 
      if ($target.is(":focus")) { // Checking if the target was focused 
      return false; 
      } else { 
      $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable 
      $target.focus(); // Set focus again 
      }; 
     }); 
     } 
    } 
    });