Có cách nào để lề một neo trong css?

Question

Tôi có chiều cao tiêu đề cố định 50px. Trong cơ thể của tôi, tôi có rất nhiều neo. Vấn đề là, khi tôi nhấp vào liên kết trỏ đến neo, neo xuất hiện dưới tiêu đề cố định của tôi và tôi mất 50px nội dung (tôi cần cuộn lên 50px để đọc nội dung bên dưới tiêu đề).

Có cách nào để lề một thanh neo có kích thước 50px không? Cơ thể của tôi được làm đầy với rất nhiều hộp (div) với chênh lệch giữa themself, vì vậy tôi không thể đưa ra một div trống của 50px và sau đó neo sau khi nó ..

html:

<div id="header"></div> 
<div id="content"> 
    <div class="box" id="n1"></div> 
    <div class="box" id="n2"></div> 
    <div class="box" id="n3"></div> 
</div> 

css:

#header{ 
    height: 40px; 
    width: 100%; 
    margin: 0px; 
    padding: 0px; 
    position: fixed; 
    text-align: center; 
    z-index:2; 
} 

#content{ 
    padding-top: 50px; 
    margin: 0px; 
} 

.box { 
    width: 80%; 
    margin-left: auto; 
    margin-right: auto; 
    vertical-align : top; 
    padding: 1.4%; /* Keep it in percent (%) */ 
    margin-bottom: 30px; 
    min-height: 200px; 
} 

Answer 1

Nếu tiêu đề thực sự cố định thì hãy đặt neo của bạn vào div cuộn. Sau đó, div chứa anchor sẽ di chuyển thay vì toàn bộ trang. Truy cập fiddle và nhấp vào anchor1. Nó đi đến anchor2. Và kể từ đó trở đi.

http://jsfiddle.net/mrtsherman/CsJ3Y/3/

css - thiết tràn ẩn trên cơ thể để ngăn chặn di chuyển mặc định. Sử dụng vị trí tuyệt đối trên khu vực nội dung mới với tập hợp trên cùng và dưới cùng. Điều này buộc nó kéo dài để vừa với cửa sổ khung nhìn còn lại.

body { overflow: hidden; } 
#header { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background: gray; border: 1px solid black; } 
#content { 
    overflow: scroll; 
    position: absolute; 
    top: 50px; 
    bottom: 0px; 
    width: 100%; 
    border: 1px solid blue; 
} 

html

<div id="header">header</div> 
<div id="content"> 
    <div> 
     Page Content <br /> 
     <a id="a1" href="#anchor2" name="anchor1">Anchor 1</a>     
     <a id="a2" href="#anchor1" name="anchor2">Anchor 2</a> 
    </div> 
</div>​ 

Answer 2

Nếu bạn sử dụng jQuery, bạn sử dụng chức năng này:

function scrollToAnchor() { 
    if($(".jquery-anchor").length > 0 && document.URL.indexOf("#") >= 0){ 
    var anchor = document.URL.split("#")[1]; 
    $(".jquery-anchor").each(function() { 
     if($(this).attr("name") == anchor) { 
      $("html,body").animate({ 
        scrollTop: $(this).offset().top - 50}, 
       'slow'); 
      } 
     }); 
    } 
} 

sau đó thêm các lớp "jquery_anchor" để neo

Answer 3

của bạn Đối với giải pháp CSS tinh khiết chỉ cần sử dụng một div khác với tỷ lệ ký quỹ oposited :)

<style> 
.anchor { 
    margin-top: -50px; 
    margin-bottom: 50px; 
} 
</style> 

<div id="n1" class="anchor"></div> 
<div class="box"></div>