Чи можливо створити гіперпосилання на певну позицію прокрутки на веб-сторінці? Наприклад, я хотів би створити посилання на http://www.stackoverflow.com/ , але зі сторінкою прокручується вниз на 100 пікселів.
Відповіді:
Ви можете прокрутити дану позицію за допомогою плагіна jQuery scrollTo . Якщо ви подивитеся на його демонстраційну сторінку , ви побачите, що плагін може використовувати різні варіанти, включаючи прокрутку до певної позиції. Це означає, що вам доведеться контролювати JavaScript цілі, тому це може не підходити для посилання на зовнішній сайт.
Посилання на ванільний шлях, десь знаходиться на сторінці, здійснюється через прив’язну точку, яка вже присутня на сторінці.
Це можна створити за допомогою <a>…</a>тегу. Зауважте, що посилання, вказане в "опорній точці" (вище), має #h-12.2кінець. Це відповідає <a id="h-12.2">12.2</a>вбудованому в HTML, що утворює сторінку, і при натисканні на нього буде перестановлено перегляд сторінки на цей прив’язок.
Зауважте, що до HTML5 nameатрибут використовувався в тезі прив’язки, але він більше не підтримується, і idатрибут слід використовувати на його місці ( посилання ). Це також означає, що ви можете використовувати будь-який елемент для тега прив’язки, ви не обмежені <a>елементом.
Подібно до відповіді Павла, ви також можете пов’язати перше виникнення ідентифікатора тегу в документі HTML. Це не буде точною кількістю пікселів.
Наприклад, посилання / прокрутка до питання або відповідей цієї сторінки .
Спробуйте клацнути правою кнопкою миші та оглянути елементи на сторінці. Ви знайдете <a>теги, це точки прив’язки.
Потім вийміть <перед першим і останнім, aщоб вони не відображалися як посилання. Насправді ви можете бачити ефекти під час написання у вікні відповідей, коли він показує попередній перегляд нижче.
a href="/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header">question /a>
і
a href="/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers">answers /a>
Як бачите, єдина відмінність полягає в тому самому кінці, де якор називається після #символу pound ( ). назва після - >це те, як посилання читає користувачеві.
У цьому випадку "заголовок запитання" читається як "питання", а відповіді бувають однаковими.
Тоді наступне має посилатися на коментар Майка . Оскільки точка їх прив’язки є382094
Щоб уточнити, ви можете просто знайти якір і додати #після свого посилання.
/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
всі вони перевезуть вас до різних місць на одній сторінці.
Для посилання на певну піксельну позицію на сторінці розмістіть тег прив’язки всередині знака, який розміщується абсолютно за допомогою координат "top: x left: y".
Ви можете використовувати Citebite для посилання на певну позицію веб-сторінки, навіть якщо вона не використовує ідентифікатор у цій позиції. Він простий у використанні. Просто перейдіть за посиланням, яке я надав тут, а потім вставте фрагмент тексту, який ви хочете показати спочатку після переходу на вашу веб-сторінку в текстовому полі Цитата, а потім надайте посилання веб-сторінки в текстовому полі вихідної URL-адреси. Потім натисніть, щоб зробити Citebite. Тоді він створить посилання. Це посилання стане бажаним посиланням.