Как избежать попадания наверх страницы с помощью якорей? - PullRequest
Новая
       8

Как избежать попадания наверх страницы с помощью якорей?

0 голосов
/ 21 февраля 2019

Можно ли как-нибудь помешать мне нажать на якорь, чтобы переместиться в начало страницы?

это мой код: 

<div class="slider">
<div class="slides">
<div id="slide-1">1</div>
<div id="slide-2">2</div>
<div id="slide-3">3</div>
<div id="slide-4">4</div>
<div id="slide-5">5</div>
</div>
<a href="#slide-1">1</a>
<a href="#slide-2">2</a>
<a href="#slide-3">3</a>
<a href="#slide-4">4</a>
<a href="#slide-5">5</a>

Ответы [ 3 ]

0 голосов
/ 21 февраля 2019

A) Если я вас хорошо понял, вы можете сделать это с помощью чистого CSS. 

a[href*="#slide"] {
  pointer-events: none;
}

B) После прочтения того, что вы написали в комментариях, вы можете использовать то, что предложил PHPglue. 

document.querySelectorAll('a[href*="#slide"]')
.forEach($a => $a.onclick = e => {
   e.preventDefault() // don't go 
   console.log('but do your things')
})

Надеюсь, эта помощь:)

0 голосов
/ 21 февраля 2019

Ваш синтаксис запутан, но легко понять, как это произошло ... Вы можете создавать внутренние ссылки на страницы, которые позволят вам перейти с одного места (или раздела) на другое на той же странице или даже наконкретный абзац внутри другой страницы.Проблема с вашим примером кода заключается в том, что вы используете синтаксис HTML для ссылки на CSS.

<div id="slide-1">1</div>
...
<a href="#slide-1">1</a>

Это правда, что вы используете # (хэш-тег) в вашем <a> теге.Таким образом, использование <a href="#slide-1">1</a> теоретически должно работать.И да, вы можете использовать id с тем же именем, чтобы определить, куда должна вести вас ссылка.Однако - вы не можете использовать имя для чего-либо еще на странице.Он должен быть уникальным и конкретным, чтобы избежать путаницы.Поскольку ваши теги <div> имеют тот же идентификатор, что и ваши теги привязки, и поскольку вы используете селектор CSS id, браузер игнорирует ваш оператор <div id=, поскольку он не может найти стиль #slide-1 в вашемФайл CSS.

Самый простой способ исправить это - изменить код на: 

<div id="css_style" name="slide-1">1</div>
...
<a href="#slide-1">1</a>

Это позволит <div> сохранить нужные стили и подключить ссылку кякорь на странице.Только не называйте свой стиль CSS тем же именем, используйте другое.

W3C Ссылки Документация

0 голосов
/ 21 февраля 2019

Насколько я знаю, вы не можете избежать этого, поскольку это связано с тем фактом, что когда вы попадаете на страницу, ее нужно рендерить.До этого этого идентификатора просто не существовало.

Так что нет способа его удалить.Вы можете только попытаться ускорить это немного.Просто убедитесь, что ваша страница загружается быстро.

...