Добавьте класс к Anchor, используя специальную библиотеку Smoot-Scroll - PullRequest
Новая
       19

Добавьте класс к Anchor, используя специальную библиотеку Smoot-Scroll

0 голосов
/ 07 мая 2018

Я недавно установил библиотеку плавной прокрутки из cferdinandi , и функция плавной прокрутки работает как чудо.

Якоря, добавленные в мой текст с использованием CMS, выглядят так: 

<span id="authentication" class="ancre"></span>

Удостоверение личности каждый раз меняется, в зависимости от того, о чем я говорю в моем тексте. И это отлично работает.

Моя проблема в том, что библиотека с плавной прокруткой, кажется, удаляет класс при запуске, поэтому мой class = 'ancre' не отображается при вызове якоря. Класс существа: 

.ancre:target{
    background-color: #131b24;
    color: white;
}

Итак, что я сделал, я удалил параметр «target» своего класса и добавил функцию в свой JS-файл, чтобы добавить класс после запуска smooth-scroll. Это выглядит так:

CSS в css / app.css 

.ancre{
    background-color: #131b24;
    color: white;
}

JS в js / app.js 

after: function () {
    var className = 'ancre';
    document.querySelector('.' + className).classList.remove(className);
    document.getElementById(anchor.id).classList.add(className);
}

Но это не работает, и я просто не мог понять, почему.

Вы можете попробовать его, нажав на этой странице кнопки «Двухэтапная аутентификация» и / или «Мобильный» .

Я не кодер, а скорее дизайнер, и я был бы рад получить помощь здесь.

Спасибо всем за помощь,

Лучший, Квинт

1 Ответ

0 голосов
/ 07 мая 2018

Вы можете использовать функцию javascript scrollIntoView без использования библиотеки.

https://codepen.io/gezzasa/pen/gzXPbJ/

Сначала я должен был установить контейнеры на position: relative;, а затем установить привязку на position: absolute; top: 0;. с параметром на JS, установленным на block : 'center', теперь он будет только прокручиваться, пока якорь не окажется в середине экрана.

var smoothScroll = function(e, me) - это функция, которую я объявил, и она запускается при щелчке по тегу a. Существуют разные способы запуска функции, но это достаточно просто. Я передал event при нажатии на событие (событие, которое срабатывает при нажатии) и this, чтобы сообщить сценарию, на что я нажал.

e.preventDefault() не позволит тегу запускать функцию по умолчанию, которая перезагрузит страницу с предоставленной ссылкой. в этом случае он добавит идентификатор без этого скрипта.

document.querySelector (me.getAttribute ('href')) получит идентификатор, к которому нужно перейти, а затем функция scrollIntoView будет прокручиваться в соответствии с заданными вами параметрами.

Надеюсь, я все хорошо объяснил ... У меня нет опыта объяснения JS.;

...