определение нескольких jQuery для прослушивателей с прокруткой кликов на основе массива javascript

Question

Я определил «essayList» как массив, содержащий несколько элементов, которые я намерен использовать для создания нескольких событий прокрутки по клику для разделов моего сайта с использованием цикла for.

Например, при оценке "vi" цикл for должен создать прослушиватель события щелчка, который будет прокручивать страницу до элемента, имеющего "#vi" в качестве идентификатора, при нажатии на элемент, имеющий "# essay-link-vi" в качестве ID.

Однако приведенный ниже код заставляет все действия по щелчку прокручиваться до элемента с идентификатором «I» (последний элемент массива).

var index = 0;
var essayList = ['ix', 'viii', 'vii', 'vi', 'v', 'iv', 'iii', 'ii', 'i'];

    for (index = 0; index < essayList.length; ++index) {

        currentAnchor = "#essay-link-" + essayList[index];
        currentTarget = "#" + essayList[index];

        console.log(currentAnchor);
        console.log(currentTarget);

        jQuery(currentAnchor).click(function () {
            jQuery([document.documentElement, document.body]).animate({
                scrollTop: jQuery(currentTarget).offset().top
            }, 2000);
        });
    }

Я подозреваю, что у меня могут быть проблемы с переменными областями. Как я могу сделать это для работы цикла? console.log сообщает правильные значения.

Answer 1

Не уверен, что это то, чего вы пытаетесь достичь:

Создать страницу :

$('html').css('height', '4000px')

Создать якоря :

var index = 0;
var essayList = ['ix', 'viii', 'vii', 'vi', 'v', 'iv', 'iii', 'ii', 'i'];

Динамическое создание элементов для щелчка :

for (index = 0; index < essayList.length; ++index) {
    sec_ind = index + 1
    $('html').append("<a href='#" + essayList[index] + "' class='butt'>GO TO SECTION" + sec_ind + "</a><br>")
}

Динамическое создание раздела для прокрутки до :

for (index = 0; index < essayList.length; ++index) {
    sec_ind = index + 1
    $('html').append("<div class='sec' id=" + essayList[index] + ">SECTION " + sec_ind + "</div>")
    $('.sec').css('height', '600px').css('background', 'grey').css('margin-bottom', '10px')
}

Добавить CSS для плавной прокрутки :

html {
  scroll-behavior: smooth;
}

Результат :

Вот Скрипка .