Penyelesaian kepada masalah tajuk halaman dan sauh halaman bertindih

Question

Jika saya mempunyai pengepala tidak menatal dalam halaman HTML yang ditetapkan di bahagian atas, dengan ketinggian yang ditentukan:

Adakah terdapat cara untuk menggunakan sauh URL (#fragment bahagian) untuk membuat penyemak imbas menatal ke kedudukan tertentu dalam halaman tetapi masih menghormati ketinggian elemen tetap tanpa menggunakan JavaScript?

http://example.com/#bar

Ralat (tetapi tingkah laku biasa): Betul:
+---------------------------------+ +-------------- -------------------+
|.///////////////////////////////////// /// pengepala |
+---------------------------------+ +-------------- -------------------+
|. teks selebihnya di sini |
|. ... |
|. ... |
|. ... |
+---------------------------------+ +-------------- -------------------+

Answer 1

Jika anda tidak boleh atau tidak mahu menetapkan kelas baharu, anda boleh mencipta kelas pseudo dalam CSS untuk ::before伪元素添加一个固定高度的:target:

:target::before {
  content: "";
  display: block;
  height: 60px; /* 固定的标题高度 */
  margin: -60px 0 0; /* 负的固定标题高度 */
}

Atau gunakan jQuery untuk menatal halaman relatif kepada :target:

var offset = $(':target').offset();
var scrollto = offset.top - 60; // 减去固定的标题高度
$('html, body').animate({scrollTop:scrollto}, 0);

Answer 2

Saya mengalami masalah yang sama. Saya menyelesaikan masalah ini dengan menambah kelas pada elemen anchor dan menggunakan ketinggian bar atas sebagai nilai padding-top.

<h1><a class="anchor" name="barlink">Bar</a></h1>

Saya menggunakan CSS berikut:

.anchor { padding-top: 90px; }