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

Question

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

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

但是，下面的代码使所有单击操作都滚动到ID为“ I”（数组的最后一项）的元素。

onSystemUiVisibilityChangeInterface

我怀疑变量范围可能有问题。如何使此for循环工作？ 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。