Блог

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

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

Однако приведенный ниже код заставляет все действия с кликом прокручиваться до элемента с идентификатором «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);
        });
    }
  

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

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

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

 $('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;
}
  

Результат:

Вот Скрипка.