Tiêu đề và liên kết nội bộ chú ý

Tôi đã sử dụng css để tạo "tiêu đề dính" luôn hiển thị ở đầu trang và nội dung khác được đặt bên dưới trang đó. Trong tiêu đề tôi có một số liên kết nội bộ. Vấn đề là khi một liên kết được nhấp vào sau đó trang được cuộn để mục tiêu được đặt ở đầu trang - được ẩn bởi tiêu đề dính của tôi - thay vì ngay bên dưới nó.Tiêu đề và liên kết nội bộ chú ý

Bất kỳ đề xuất nào về cách giải quyết vấn đề này?

css:

#header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 3.5em; 
    padding:0; 
    margin: 0; 
} 

#container { 
    width: 100%; 
    margin: 3.5em 0 0 0; 
    padding: 0; 
    overflow:auto; 
} 

#content { 
    padding: 0 4em; 
    margin: 0; 
}

html:

<body> 

    <div id="header"> 
     <div id="content"> 
      <p> 
       <a href="#xyz">XYZ</a> 
      </p> 
     </div> <!--end content--> 
    </div> <!--end header--> 

    <div id="container"> 
     <div id="content"> 
      <p>A lot of text.</p> 
      <a name="xyz"></a> 
      <p>A lot of text</p> 
     </div><!--end content--> 
    </div><!--end container--> 

</body>

Nguồn

2011-10-10 user635817

Một điều đơn giản để làm là để đặt các <a name="xyz"></a> hơi cao lên văn bản.

Điều này sẽ yêu cầu một số bản dùng thử và lỗi, nhưng đó có thể là điều nhanh nhất/dễ nhất để thực hiện.

Một điều bạn có thể làm là để tự động thêm margin hoặc padding khi liên kết được nhấp.

Nguồn

2011-10-10 19:59:03

Bạn cũng có thể đặt lề trên cao bằng tiêu đề dính cho đoạn xyz của bạn trong tệp CSS của bạn. Điều đó có thể dẫn đến khoảng trống trong trang HTML kết quả của bạn mặc dù ...

Nguồn

2011-10-10 20:03:43 supertopi

Bắt đầu bằng cách nhận ID duy nhất cho phần nội dung trong tiêu đề và bên trong vùng chứa. Có lẽ bạn có thể đặt một ul bên trong tiêu đề cho các liên kết bên trong. Đặt vị trí của nội dung bên trong trình bao bọc tuyệt đối, et voila!

Có nơi nào chúng tôi có thể xem xét vấn đề của bạn không?

Nguồn

2011-10-10 20:08:20 oceanmountain

Một chút javascript (jQuery sử dụng ở đây) có thể làm điều đó:

$('#header a').click(function (e) { 
    e.preventDefault(); 

    var offset = $('a[name=' + $(this).attr('href').substr(1) + ']').offset(); 

    $('html, body').animate({ scrollTop: offset.top - $('#header').outerHeight() }, 'fast'); 
});

này tìm các phần tử với một thuộc tính tên đó phù hợp với thuộc tính href của liên kết nhấp, và sau đó sinh động một cuộn giấy đó vị trí của phần tử giảm chiều cao của tiêu đề.

http://jsfiddle.net/blineberry/bTa8b/

Nguồn

2011-10-10 20:24:57 Brent

Lúc đầu, nó tốt hơn để sử dụng khối với id thay vì name - đó là nhiều cách tiêu chuẩn.

Sau đó, thêm lớp vào một neo và sau đó đặt nó thành vị trí tuyệt đối + di chuyển nó với tiêu cực trên cùng margin bằng với chiều cao của tiêu đề.

Nhìn vào fiddle này: http://jsfiddle.net/kizu/gfXJJ/

Hoặc cách khác, cho các trình duyệt có hỗ trợ giả yếu tố, bạn có thể thêm một với chiều cao mong muốn và phải bồi thường đó là chiều cao của lề trên tiêu cực, vì vậy nó sẽ lên như khi bắt đầu của khối mà bạn muốn tạo liên kết. Làm như vậy bạn có thể thêm id s vào các phần tử đã tồn tại thay vì tạo các phần tử thừa.

Dưới đây là một phiên bản với phần tử giả: http://jsfiddle.net/kizu/gfXJJ/2/

Hoặc bạn có thể thêm đầu padding và tiêu cực margin đến một phần tử với id bản thân: http://jsfiddle.net/kizu/gfXJJ/2/ - nhưng trong trường hợp đó có thể có vấn đề với nền trên đó, ' gây ra các khối được thể chất mở rộng ở đầu trang.

Nguồn

2011-10-10 21:01:45 kizu

Hoạt động hoàn hảo, cảm ơn! – user635817

@ user635817 Vui lòng chính thức chấp nhận câu trả lời của kizu. – Brent

Tôi tin rằng câu hỏi này trùng lặp câu hỏi trong liên kết này: offsetting an html anchor to adjust for fixed header cung cấp nhiều giải pháp khả thi hơn. Tôi tin rằng các câu hỏi có thể được sáp nhập, nhưng tôi không có các đặc quyền để làm điều đó. (Đó là lý do tương tự tôi đang nhập câu trả lời này mặc dù tôi biết nó phải là một bình luận. Nhưng tôi không được phép bình luận.)

Nguồn

2014-09-12 10:01:59 Bartenstein

Yếu tố giả không có vẻ hoạt động trong mọi tình huống. Tôi đã có may mắn chỉ áp dụng một lề trên tiêu cực và một đệm đầu tích cực để bù đắp cho lợi nhuận tiêu cực.

ví dụ: <a id="xyz" style="margin-top:-50px; padding-top:50px">Title</a>

Nguồn

2017-11-03 18:09:08

Tiêu đề và liên kết nội bộ chú ý

Trả lời

Các vấn đề liên quan