javascript - 我无法获得多个相同的 ID 来执行相同的脚本

Question

我想创建滚动到顶部的按钮。

这是我在 JS 中的代码。问题是，即使我有 3 个具有相同 ID 的按钮，但每次加载页面时我只能使用一个。为什么会这样？我应该怎么办？

更新

我不知道我只能使用一次ID。我尝试了所有建议的解决方案，但出于某种原因，getElementsByClassName 也不起作用。 :(

解决方案是替换为:

$('.scrolltotop').on('click', function(){/* do your stuff */});

这也是我的 html:

<ul class="stats">
<li class="scrolltotop"><a href="#">GO TO TOP</a></li>
</ul>

JS:

document.getElementsByClassName('scrolltotop').onclick = function () {
 scrollTo(document.body, 0, 100);
}

    function scrollTo(element, to, duration) {
        if (duration < 0) return;
        var difference = to - element.scrollTop;
        var perTick = difference / duration * 2;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        scrollTo(element, to, duration - 2);
    }, 10);
}

Answer 1

新代码。这应该工作。

getElementsByClassName 只会返回所有具有类名的元素的array-like object。你必须循环它并一个一个地分配它。

var classData = (document.getElementsByClassName('scrolltotop'));
for(var i = 0; i < classData.length; i++)
{
    classData[i].onclick = function()
    {
        scrollTo(document.body, 0, 100);
    }
}
function scrollTo(element, to, duration)
{
    if(duration < 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 2;

    setTimeout(function()
    {
        element.scrollTop = element.scrollTop + perTick;
        scrollTo(element, to, duration - 2);
    }, 10);
}

另一种轻松实现的方法是使用 jQuery。

$('.scrolltotop').on('click', function(){/* do your stuff */});