Question

我有这个代码用于平滑滚动，它工作得很好，但只适用于一个＆＃34; clickme＆＃34; id，我怎么能将这个代码用于多个选项卡whit i ++

<div class="navbar">
  <button type="button" id="clickme1">Scroll to red section!</button>
  <button type="button" id="clickme2">Scroll to blue section!</button>
</div>

<div class="second" id="second">Hello</div>
<div class="tab1" id="tab1">The start of the red section!</div>
<div class="tab2" id="tab2">The start of the blue section!</div>

这里是我想要使用的纯JavaScript，请不要推荐我jQuery和锚点导航。

document.getElementById('clickme1').addEventListener('click', function() {

    var header = document.querySelectorAll('.navbar');
    aim = -header[0].clientHeight;
    initial = Date.now();

    smoothScroll(document.getElementById('tab1'));
});

*******或更简化，如何缩短此代码：*******

document.getElementById('clickme1').addEventListener('click', function() {
    var header = document.querySelectorAll('.navbar');
    aim = -header[0].clientHeight;
    initial = Date.now();

    smoothScroll(document.getElementById('tab1'));
});

document.getElementById('clickme2').addEventListener('click', function() {
    var header = document.querySelectorAll('.navbar');
    aim = -header[0].clientHeight;
    initial = Date.now();

    smoothScroll(document.getElementById('tab2'));
});

这里是JSFIDDLE

Answer 1

您可以执行以下操作

// Get buttons
var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
    // Iterate over buttons and add handler
    buttons[i].addEventListener('click', clickHandler, false);
}

// Handler function
function clickHandler(){
    var counter = this.id.substring(7); // Substring id to get counter
    var header = document.querySelectorAll('.navbar');
    aim = -header[0].clientHeight;
    initial = Date.now();
   smoothScroll(document.getElementById('tab'+counter));
}

注意：由于您可以在页面上设置其他按钮并且不想将此处理程序添加到它们中，因此，我建议您添加特定的标记名称选择器类按钮元素，然后使用类选择器来获取元素。

Answer 2

您应该考虑使用具有渐进增强功能的正确锚点链接来平滑滚动。这将涉及将按钮更改为<a>标签或仅包装它们：

<div class="navbar">
  <a href="#tab1"><button type="button">Scroll to red section!</button></a>
  <a href="#tab2"><button type="button">Scroll to blue section!</button></a>
</div>

然后，您可以使用事件委派来捕获文档级别任何锚链接的点击次数：

document.addEventListener('click', function (evt) {
    var tgt = evt.target;
    if (tgt.tagName === 'A' && tgt.getAttribute('href')[0] === '#') {
        smoothScroll(document.getElementById(tgt.hash.slice(1)));
    }
});

这种方法有很多好处，包括：

能够通过复制/粘贴网址来链接到某个部分
当JavaScript不存在时优雅降级。

getElement 1和do1，getElement 2和do2，getElement 3和do3

2 个答案: