基于javascript数组在单击滚动侦听器上定义几个jQuery

Question

我已经将“essayList”定义为一个包含几个项目的数组，我打算用它来帮助使用for循环为我的网站部分构建几个点击滚动事件。

例如，在评估“vi”时，for循环应该构建一个click事件监听器，当点击具有“＃essay-link-vi”作为ID的元素时，该监听器将页面滚动到具有“#vi”作为ID的元素。

但是，下面的代码使所有单击操作都滚动到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;
}

结果：

这是一个Fiddle。