У меня есть ряд элементов на моей странице, которым я даю класс "ссылка на страницу" и атрибут "dest='#some-id'".
Затем у меня есть этот фрагмент javascript:
window.onload = function() {
setPageLinks();
}
function setPageLinks() {
const PAGE_LINKS = document.getElementsByClassName("page-link");
for (let i = 0; i < PAGE_LINKS.length; i++) {
PAGE_LINKS[i].addEventListener("click", function(event) {
let linkTarget = event.target.getAttribute("dest");
//alert(linkTarget);
$('html, body').animate({
scrollTop: $(linkTarget).offset().top
}, 600);
});
}
}
Это заставляет все элементы с классом «ссылка на страницу» прокручиваться до элемента с идентификатором, указанным в атрибуте «dest».
Он отлично работает со всеми моими элементами «ссылка на страницу», кроме одного, который является элементом кнопки. Метод getAttribute для этого иногда — и, по-видимому, случайным образом — возвращает null при нажатии. Этого не происходит в Firefox, но это происходит в Chrome, Edge и Opera.
Это мой элемент кнопки:
<button type="button" class="page-link" dest="#about">
<span class="front-btn-text">View my work</span>
<span class="front-btn-arrow"><i class="fas fa-arrow-right"></i></span>
</button>
Может ли кто-нибудь сказать мне, почему возникает эта ошибка, что с этим делать (и, возможно, почему она не возникает в Firefox?
Спасибо!
const PAGE_LINKS = Array.from(document.getElementsByClassName("page-link"));
вместо этого?getElementsByClassName
возвращаетHTMLCollection
, который является активным списком; поэтому, когда какой-либо элемент.page-link
изменяется,PAGE_LINKS
может быть затронут и видоизменен. - person Sebastian Simon   schedule 17.01.2019<span>
или<i>
,event.target
не будет иметь атрибутаdest
. Вместо этого используйтеthis
илиevent.currentTarget
. - person Bergi   schedule 17.01.2019