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

我有这个代码用于平滑滚动，它工作的很好，但只适用于一个“clickme”id，我怎么能使用这个代码多个标签惠特i ++getElement 1和do1，getElement 2和do2，getElement 3和do3

<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

来源

2016-01-04 kloshar4o

你可以做像下面

// 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)); 
}

注意：正如你可以有一些其他的按钮在你的页面上，不想将这个处理程序添加到它们中，因此，在标签名称选择器的位置，我会建议你添加一个特定的类到按钮元素，然后使用类选择器来获取元素。

来源

2016-01-04 14:43:34 nikhil

您应该考虑使用适当的锚点链接和渐进增强来平滑滚动。这将涉及要么改变按钮<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))); 
    } 
});

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

能够通过复制/粘贴URL热链接到一个部分
当JavaScript不存在时，优雅的降级。

来源

2016-01-04 14:56:55

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

回答

相关问题