HTML不滾動目標正確

Question

我創建了一個錨標記，如下

<a href="index.html#top">Top</a> 

並創建下列標記

<h2 id="top">Header</h2> 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
    when an unknown printer took a galley of type and scrambled it to make a type 
    specimen book. It has survived not only five centuries, but also the leap into 
    electronic typesetting, remaining essentially unchanged. It was popularised in the 
    1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more 
    recently with desktop publishing software like Aldus PageMaker including versions 
    of Lorem Ipsum. 
</p> 

一旦點擊鏈接，它的滾動到target但不是能看不到<h2>標籤。所以至少需要scroll以上target由10px or 20px。請幫我解決這個問題，工作會更加明顯。

Answer 1

做這樣的：在

<h2 id="top" tabindex="1" >Header</h2>

添加tabindex屬性並使用對焦（）

$("#top").attr("tabindex",-1).focus(); 

OR

或者最簡單的方法是添加一個錨標記附近的H2和add id =「top」

<a id="top"></a><h2>Header</h2> 

但我不會喜歡這個。

Answer 2

第一件事情你需要改變定位標記的HREF如下

<a href="#top">Top</a>

，那麼你可以在下面的jQuery代碼編寫獲得滾動到目標

(function() { 
     $('a').click(function() { 
      $('html, body').animate({ 
      scrollTop: $("#top").offset().top 
      }, 3000); 
     }); 
    }); 

它將工作。

Answer 3

個人而言，我一般減去的div頂部一些像素，所以我的標題看起來是正常的，這樣做：

jQuery('html, body').animate({ 
    scrollTop: jQuery(jQuery(this).attr('href')).offset().top - 25 
    /* You can minus the pixels */ 
}, 500);