Czy można utworzyć hiperłącze do określonej pozycji przewijania na stronie internetowej? Na przykład chciałbym utworzyć link do http://www.stackoverflow.com/ , ale ze stroną przewiniętą w dół o 100 pikseli.
Odpowiedzi:
Możesz przewinąć do określonej pozycji za pomocą wtyczki jQuery scrollTo . Jeśli zajrzysz na stronę demonstracyjną , zobaczysz, że wtyczka ma wiele różnych opcji, w tym przewijanie do określonej pozycji. Oznaczałoby to jednak, że będziesz musiał kontrolować JavaScript celu, więc może to nie być odpowiednie dla linku do strony zewnętrznej.
Łącze waniliowe do jakiegoś miejsca na stronie prowadzi przez punkt kontrolny już obecny na stronie.
Można to utworzyć za pomocą <a>…</a>znacznika. Zauważ, że łącze określone w „punkcie kontrolnym” (powyżej) ma #h-12.2na końcu. Odpowiada to <a id="h-12.2">12.2</a>osadzonemu w HTML stanowiącemu stronę, a po kliknięciu zmieni położenie widoku strony na tę kotwicę.
Pamiętaj, że przed HTML5 nameatrybut był używany w tagu anchor, ale nie jest już obsługiwany, a idatrybut powinien być używany zamiast niego ( odniesienie ). Oznacza to również, że możesz użyć dowolnego elementu dla tagu zakotwiczenia, nie jesteś ograniczony do tego <a>elementu.
Podobnie do odpowiedzi Paula, możesz również link do pierwszego wystąpienia identyfikatora tagu w dokumencie HTML. Nie będzie to jednak dokładna liczba pikseli.
Na przykład link / przewiń do pytania lub odpowiedzi na tej stronie .
Spróbuj kliknąć prawym przyciskiem myszy i sprawdzić elementy na stronie. Znajdziesz <a>tagi, to są punkty kontrolne.
Następnie wyjmij <przed pierwszym i ostatnim a, aby nie pojawiały się jako linki. Możesz faktycznie zobaczyć efekty podczas pisania w polu odpowiedzi, gdy pokazuje poniższy podgląd.
a href="https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header">question /a>
i
a href="https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers">answers /a>
Jak widać, jedyną różnicą jest na samym końcu, gdzie nazwy kotwic znajdują się po #symbolu pound ( ). nazwa po >to dotyczy sposobu, w jaki link czyta się użytkownikowi.
W tym przypadku „nagłówek pytania” brzmi „pytanie”, a odpowiedzi są takie same.
Następnie poniższy link powinien zawierać link do komentarza Mike'a . Ponieważ ich punktem kontrolnym jest382094
Aby to wyjaśnić, możesz po prostu znaleźć kotwicę i dodać następujący #po niej link.
https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header
https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers
https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#880079
wszystkie zabiorą Cię do różnych miejsc na tej samej stronie.
Aby połączyć się z pozycją piksela na stronie, umieść tag zakotwiczenia w div, który jest pozycjonowany absolutnie za pomocą współrzędnych „top: x left: y”.
Możesz użyć Citebite, aby połączyć się z określoną pozycją strony, nawet jeśli nie używa ona identyfikatora w tej pozycji. Jest łatwy w użyciu. Wystarczy przejść do linku, który tu podałem, a następnie wkleić fragment tekstu, który chcesz wyświetlić po przejściu na stronę w polu tekstowym Cytat, a następnie podać link do strony w polu tekstowym Źródłowy adres URL. Następnie kliknij, aby zrobić Citebite. Następnie wygeneruje link. Ten link będzie pożądanym linkiem.