Có thể tạo một siêu liên kết đến một vị trí cuộn cụ thể trên một trang web? Ví dụ: tôi muốn tạo một liên kết đến http://www.stackoverflow.com/ , nhưng với trang được cuộn xuống 100 pixel.
Câu trả lời:
Bạn có thể cuộn đến một vị trí nhất định bằng cách sử dụng plugin jQuery scrollTo . Nếu bạn có một cái nhìn trên trang demo của nó , bạn sẽ thấy rằng plugin có khả năng với nhiều tùy chọn khác nhau, bao gồm cuộn đến một vị trí nhất định. Tuy nhiên, điều đó có nghĩa là bạn phải kiểm soát JavaScript của mục tiêu, do đó, điều này có thể không phù hợp với liên kết đến một trang web bên ngoài.
Liên kết cách vanilla đến một nơi nào đó trong trang thông qua một điểm neo đã có trong trang.
Điều này có thể được tạo ra bằng cách sử dụng <a>…</a>thẻ. Lưu ý rằng liên kết được chỉ định trong "điểm neo" (ở trên) có #h-12.2ở cuối. Điều này tương ứng với việc <a id="h-12.2">12.2</a>nhúng trong HTML tạo thành trang và khi được nhấp sẽ định vị lại chế độ xem trang cho neo này.
Lưu ý rằng trước HTML5, namethuộc tính đã được sử dụng trong thẻ neo, nhưng không còn được hỗ trợ và idthuộc tính nên được sử dụng ở vị trí của nó ( tham chiếu ). Điều này cũng có nghĩa là bạn có thể sử dụng bất kỳ yếu tố nào cho thẻ neo, bạn không bị giới hạn đối với <a>yếu tố đó.
Tương tự như câu trả lời của Paul, bạn cũng có thể liên kết đến lần xuất hiện đầu tiên của ID thẻ trong tài liệu HTML. Đây sẽ không phải là một số pixel chính xác.
Ví dụ: liên kết / cuộn đến câu hỏi hoặc câu trả lời của trang này .
Hãy thử nhấp chuột phải và Kiểm tra các yếu tố trên trang. Bạn sẽ tìm thấy các <a>thẻ, đó là những điểm neo.
Sau đó lấy ra <trước và đầu tiên ađể chúng không hiển thị dưới dạng các liên kết. Bạn thực sự có thể thấy các hiệu ứng trong khi viết vào hộp phản hồi khi nó hiển thị cho bạn bản xem trước bên dưới.
a href="/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header">question /a>
và
a href="/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers">answers /a>
Như bạn có thể thấy, sự khác biệt duy nhất là ở cuối cùng nơi tên neo sau #biểu tượng pound ( ). Tên sau >là dành cho cách liên kết đọc cho người dùng.
Trong trường hợp này, "tiêu đề câu hỏi" đọc là "câu hỏi" và câu trả lời xảy ra giống nhau.
Sau đó, những điều sau đây nên liên kết với bình luận của Mike . Vì điểm neo của chúng là382094
Để làm rõ, bạn chỉ cần tìm neo và thêm #sau liên kết của bạn.
/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header
/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers
/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#880079
tất cả sẽ đưa bạn đến những nơi khác nhau trên cùng một trang.
Để liên kết đến một vị trí cụ thể pixel trên một trang, hãy đặt thẻ neo bên trong div được định vị hoàn toàn bằng tọa độ "top: x left: y".
Bạn có thể sử dụng Citebite để liên kết đến một vị trí cụ thể của trang web ngay cả khi nó không sử dụng id ở vị trí đó. Nó rất dễ dàng để sử dụng. Chỉ cần truy cập liên kết tôi cung cấp ở đây và sau đó dán đoạn văn bản bạn muốn hiển thị đầu tiên sau khi truy cập trang web của bạn trong trường văn bản Trích dẫn và sau đó cung cấp liên kết của trang web trong trường văn bản URL nguồn. Sau đó bấm vào để làm Citebite. Sau đó, nó sẽ tạo ra một liên kết. Liên kết đó sẽ là liên kết mong muốn của bạn.