2012-08-01 31 views
32

Tôi có một tài liệu HTML hiện đang có một số liên kết đến các đầu trang bằng cách sử dụng một neoTạo một liên kết đến Top của một trang web Nếu không có Sử dụng neo

<body id="topofpage"> 
    ... 
    <a href="#topofpage">Go to top</a> 

Tuy nhiên, tôi không thích cần để tạo id vô dụng và cách "#topofpage" hiển thị trong URL sau khi tôi nhấp vào liên kết. Có điều gì khác tôi có thể làm để liên kết đến đầu trang mà không cần sử dụng Javascript không? Tôi đã thử loại bỏ hoàn toàn neo bằng <a href=""> nhưng điều đó làm cho trang làm mới.

Trả lời

52

According to the HTML5 đặc tả các đoạn trống # và đoạn đặc biệt #top sẽ liên kết đến phía trên cùng của trang.

<a href="#">Go to top</a> 

<a href="#top">Go to top</a> 

Không cần tạo neo phù hợp nếu bạn sử dụng các tên đoạn đặc biệt này.

+17

Thông số HTML5 xác định một đoạn đặc biệt "#top" có thể được sử dụng để liên kết đến đầu tài liệu. Không cần xác định rõ ràng một phần tử có ID là "trên cùng". Xem [href note] của Mozilla (https: //developer.mozilla.org/en-US/tài liệu/Web/HTML/Phần tử/a # attr-href). –

10

Bạn có thể thử sử dụng javascript

<a onclick="scroll(0,0)">

Hoặc bạn có thể sử dụng jQuery

$("#Top").click(function(){ 
scroll(0,0); 
}); 
+0

Nếu tôi làm điều đó không thành công nếu tôi nhấp vào liên kết có "mở trong tab mới". Việc sử dụng Javascript như thế này có thực sự là cách duy nhất không? Ngoài ra, có phải chức năng cuộn qua trình duyệt không? – hugomg

+2

Javascript là cách duy nhất – user1513192

4

Tôi biết rằng bạn đã nói mà không sử dụng JavaScript, nhưng tôi nghĩ đó thực sự là cách duy nhất để tránh sử dụng một neo thực sự. JQuery sau sẽ thay thế các neo bằng #top href và thực hiện một cuộn hoạt hình đẹp lên trên cùng mà không thay đổi URL (xem trang của original author để biết thêm thông tin).

$(document).ready(function() { 
    $('a[href=#top]').click(function(){ 
     $('html, body').animate({scrollTop:0}, 'slow'); 
     return false; 
    }); 
}) 

jsfiddle for completeness

Tuy nhiên, tôi sẽ gắn bó với semantic HTML và sử dụng neo cho mục đích của họ sao cho ý nghĩa thích hợp có thể được giải thích bởi số lượng tối đa của các trình duyệt. Đừng quên những người khuyết tật yêu cầu trình đọc màn hình hoặc các trình duyệt đặc biệt khác. Neo được đảm bảo để làm việc.

Ngoài ra, Google announced in 2009 một số tính năng lập chỉ mục mới trực tiếp tận dụng các neo trong trang để cung cấp ngữ cảnh bổ sung mà người tìm kiếm trên web có thể đang tìm kiếm. Trong nhiều trường hợp, có thể có một phần của trang mà người dùng rất quan tâm. Google có thể cung cấp liên kết trực tiếp đến trang liên kết đó của trang để có mức độ liên quan tối ưu.

Điểm mấu chốt từ quan điểm của tôi - đừng bỏ neo. Sử dụng chúng.

-5

<a href="?">top</a> sẽ đưa bạn đến đó.

+2

Việc này sẽ tải lại trang. – BoltClock

2

Một cách hữu ích của việc sử dụng thẻ neo để có được trên cùng của trang là

<a href='#top'> Go back to the top of the page.</a> 

sử dụng nó như thế này làm cho trang web của bạn sẽ tự động di chuyển đến phía trên cùng của trang hiện tại. Hy vọng điều này rất hữu ích cho ai đó.

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