2015-10-21 93 views
0

我正在使用命名錨標記來超鏈接到另一頁上的div。這些超鏈接落在div的中間,導致關鍵標題不被看到。 例如,這link土地上的div中,這是怎麼看起來:命名的錨標記着陸在div中間而不是頂部

enter image description here

我想讓它降落在標題「真棒服務描述」和着陸應該是這樣的:

enter image description here

相關的代碼是這樣的:

<div class="container" id="Cloud"> 

     <div class="three-fourth last-in-row"> 
     <!-- Intro --> 
     <h1 class="intro-header">Awesome <strong>service</strong> description</h1> 
     <p class="intro" style="padding:3%; margin-left: -2.5%;">Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat libero. Lorem ipsum dolor sit amet. Consectetur adipiscing elit.</p> 
     <!-- End of intro --> 
     <p style="margin:0;">Donec a lectus lectus. Nullam sed lorem lacus. Aliquam et porttitor velit. Aenean bibendum, mauris id rhoncus egestas, tellus leo imperdiet turpis, ac tincidunt lacus sem vitae nisl. Sed sit amet urna ut neque dapibus imperdiet at at orci. Proin diam lectus, fringilla eu volutpat id, tristique ut nisi. Suspendisse sed nulla sed erat scelerisque consequat at ac quam. Maecenas mattis at turpis sit amet sagittis. </p> 
     <h3 style="padding:2%;"><strong>Why</strong> Us?</h3> 
     <ul class="check"> 
      <li>Quisque mollis, nunc porta sodales tincidunt, ante nunc convallis lacus, et sodales erat libero vitae risus. Sed vehicula, sapien eu egestas dapibus, ipsum elit laoreet tortor, a dapibus justo tortor quis metus. </li> 
      <li>Etiam ultricies, lorem at ultrices rutrum, massa ante tempus diam, venenatis varius arcu magna mattis mi.</li> 
      <li>Quisque mollis, nunc porta sodales tincidunt, ante nunc convallis lacus, et sodales erat libero vitae risus. Sed vehicula, sapien eu egestas dapibus, ipsum elit laoreet tortor, a dapibus justo tortor quis metus. </li> 
      <li>Etiam ultricies, lorem at ultrices rutrum, massa ante tempus diam, venenatis varius arcu magna mattis mi.</li> 
     </ul> 

我該怎麼做?

回答

0
  • 代碼工作正常。
  • 問題是,您使用了固定標題。
  • 您的修正標題重疊了您嘗試顯示的部分div。

解決方法是。

  • 將該ID標識爲「服務功能」上方「真棒服務 描述」。 enter image description here
0

你可能會得到一個滾動動畫一些額外的像素加推了網頁從您的標題下顯示主播:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<script> 
var getId = $(window.location.hash); 
var Offset = getId.offset(); 
$("html, body").animate({ scrollTop: (Offset.top-120) }, 'slow'); 
</script>