Можно ли создать гиперссылку на определенную позицию прокрутки на веб-странице? Например, я хотел бы создать ссылку на 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>элементом.
Попробуйте щелкнуть правой кнопкой мыши и проверить элементы на странице. Вы найдете <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>
Как вы можете видеть, единственная разница заключается в том самом конце, где имена якоря после фунта (# символа ). имя после того, >как ссылка читает для пользователя.
В этом случае «заголовок вопроса» читается как «вопрос», и ответы оказываются одинаковыми.
Тогда следующее должно ссылаться на комментарий Майка . Так как их опорная точка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
все это приведет вас в разные места на одной странице.
Чтобы создать ссылку на пиксельную позицию на странице, поместите тег привязки в элемент div, который расположен абсолютно с использованием координат «top: x left: y».
Вы можете использовать Citebite для ссылки на определенную позицию веб-страницы, даже если она не использует идентификатор в этой позиции. Это простой в использовании. Просто перейдите по ссылке, которую я предоставил здесь, а затем вставьте фрагмент текста, который вы хотите показать, сначала после перехода на свою веб-страницу в текстовом поле «Цитировать», а затем укажите ссылку на веб-страницу в текстовом поле «Исходный URL». Затем нажмите, чтобы сделать Citebite. Тогда он сгенерирует ссылку. Эта ссылка будет вашей желаемой ссылкой.