Можно ли создать гиперссылку на определенную позицию прокрутки на веб-странице? Например, я хотел бы создать ссылку на http://www.stackoverflow.com/ , но с прокруткой страницы вниз на 100 пикселей.
14
Можно ли создать гиперссылку на определенную позицию прокрутки на веб-странице? Например, я хотел бы создать ссылку на 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>Как вы можете видеть, единственная разница заключается в том самом конце, где имена якоря после фунта (
#символа ). имя после того,>как ссылка читает для пользователя.В этом случае «заголовок вопроса» читается как «вопрос», и ответы оказываются одинаковыми.
Тогда следующее должно ссылаться на комментарий Майка . Так как их опорная точка
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. Тогда он сгенерирует ссылку. Эта ссылка будет вашей желаемой ссылкой.
источник