Можно ли создать гиперссылку на определенную позицию прокрутки на веб-странице? Например, я хотел бы создать ссылку на http://www.stackoverflow.com/, но с прокруткой страницы вниз на 100 пикселей.
6 ответов
15
Ванильная ссылка на где-то на странице через точку привязки уже присутствует на странице.
Это можно создать с помощью <a>…</a> . Обратите внимание, что ссылка, указанная в "точке привязки" (выше), имеет #h-12.2 в конце. Это соответствует <a id="h-12.2">12.2</a> встроенному в HTML- файл, формирующий страницу, и при нажатии на него будет перемещен вид страницы на этот якорь.
Обратите внимание, что до HTML5 атрибут name использовался в теге привязки, но больше не поддерживается, и вместо него должен использоваться атрибут id (ссылка). Это также означает, что вы можете использовать любой элемент для тега привязки, вы не ограничены элементом <a> .
6
Попробуйте щелкнуть правой кнопкой мыши и проверить элементы на странице. Вы найдете теги <a> , это точки привязки.
Затем удалите < перед первым и последним a чтобы они не отображались в качестве ссылок. Вы можете увидеть эффекты во время записи в окне ответа, когда он показывает предварительный просмотр ниже.
a href="https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header">question /a>
а также
a href="https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers">answers /a>
Как вы можете видеть, единственная разница заключается в том самом конце, где имена якоря после символа фунта (#). имя после > предназначено для чтения пользователем ссылки.
В этом случае "заголовок вопроса" читается как "вопрос", и ответы оказываются одинаковыми.
Тогда следующее должно ссылаться на комментарий Майка. Так как их опорная точка - 382094
Чтобы уточнить, вы можете просто найти якорь и добавить # после вашей ссылки.
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
все это приведет вас в разные места на одной странице.
3
Вы можете прокрутить до заданной позиции с помощью плагина jQuery scrollTo. Если вы посмотрите на его демонстрационную страницу, вы увидите, что плагин может использовать множество различных опций, включая прокрутку до определенной позиции. Это будет означать, что вам придется контролировать JavaScript цели, так что это может не подходить для ссылки на внешний сайт.
1
Чтобы создать ссылку на пиксельную позицию на странице, поместите тег привязки в элемент div, который расположен абсолютно с использованием координат «top:x left:y».
0
Вы можете использовать Citebite для ссылки на определенную позицию веб-страницы, даже если она не использует идентификатор в этой позиции. Это простой в использовании. Просто перейдите по ссылке, которую я предоставил здесь, а затем вставьте фрагмент текста, который вы хотите показать, сначала после перехода на свою веб-страницу в текстовом поле Цитата, а затем укажите ссылку на веб-страницу в текстовом поле Исходный URL. Затем нажмите, чтобы сделать Citebite. Тогда он сгенерирует ссылку. Эта ссылка будет вашей желаемой ссылкой.