HTML: Tạo liên kết dẫn đến neo được đặt ở giữa trang

Question

Tôi có liên kết đến một neo trên trang html của tôi. Khi liên kết được nhấp, nó sẽ khiến trang cuộn đến cột neo sao cho neo nằm ở phía trên cùng của phần hiển thị của trang. Làm thế nào tôi có thể làm cho trang cuộn để neo sẽ ở giữa trang?

Answer 1

Không có cách nào để thực hiện điều này trong html \ css thuần túy. Có thể sử dụng js, bằng cách lấy vị trí trên cùng của phần tử và thiết lập vị trí trên cùng của trang đến vị trí của phần tử đó trừ đi một nửa chiều cao của trang.

Answer 2

Xác định phần nào của trang bạn thực sự muốn ở trên cùng và thay vào đó đặt neo vào đó. Bạn sẽ không thể thay đổi cách trình duyệt giải thích các neo - ít nhất là không làm phiền người dùng của bạn.

Answer 3

Tôi muốn thử đặt lề âm (hoặc phương pháp định vị khác) bằng một nửa chiều cao trang trên thẻ mục tiêu neo.

Answer 4

Vì "giữa trang" có liên quan đến kích thước màn hình và cửa sổ của người dùng tại bất kỳ thời điểm nào, bạn sẽ phải sử dụng Javascript để đạt được điều này, vì không có cách nào trong HTML/CSS thuần túy có chiều rộng màn hình dọc.

Answer 5

Firefox hỗ trợ thiết lập thuộc tính padding-top trên neo được đặt tên. Từ đó, bạn có thể thiết lập một cookie thông qua javascript có chứa các kích thước của trình duyệt, và điều chỉnh padding-top phù hợp với phía máy chủ của bạn. Đối với người dùng cuối, nó sẽ giống như html/css thuần túy của nó, nhưng noam là chính xác trong đó một chút JS cần thiết để có được kích thước của trình duyệt, vì nó không cung cấp cho bạn thông tin này mà không bị ép buộc chút nào.

Answer 6

html:

<a id="anchor">NEWS</a> 

css:

#anchor{ 
position: relative; 
padding-top: 100px; //(whatever distance from the top of the page you want) 
} 

làm việc tốt cho tôi

Answer 7

Tôi tìm thấy một giải pháp Anchor Links With A Fixed Header đăng bởi Phillip, ông là một nhà thiết kế web. Phillip thêm một EMPTY mới như là vị trí neo.

<span class="anchor" id="section1"></span> 
<div class="section"></div> 

sau đó đặt đoạn code css sau

.anchor{ 
    display: block; 
    height: 115px; /*same height as header*/ 
    margin-top: -115px; /*same height as header*/ 
    visibility: hidden; 
} 

Cảm ơn, Phillip!

Answer 8

nếu bạn muốn mà không gian trống làm điều đó như thế này:

<h2 id="jump_tag" style="padding-top: 500pt; margin-top: -500pt;"></h2>

nhưng, bạn vẫn sẽ phải điều chỉnh chiều cao từ javascript

Answer 9

Giải pháp của tôi là: đặt một phong cách <span class="anchor" id="X"> sau đó lớp "neo" như:

.anchor { 
position:absolute; 
transform:translateY(-50vh); 
} 

nhờ vào "-50vh" neo sẽ di chuyển ở giữa màn hình.

kiểm tra https://www.w3schools.com/cssref/css_units.asp để biết thêm thông tin.