高效的jQuery / JS - 避免再次复制粘贴相同的代码＆amp;再次

Question

我需要编写一个有效的代码，以保持简单和安全;代码文件很小，我也希望在未来的代码中使用我希望从这里获得的知识。

更新：为了清楚 - 我的例子是在浏览器窗口侧固定“按钮”＆amp;如果你单击其中一个，它会将你带到相同ID的div（请看下面的代码）。

图片：

我的代码示例：

//Smooth Scroll Menu Links

jQuery('.div1').on('click', function(e) {
    e.preventDefault();
    jQuery('html,body').animate({scrollTop:jQuery(this.hash).offset().top-100}, 800); 
}); 

//I have to copy-paste it 1000 times & only change the ".div1" to something else

//Note that I need a solution with different class names, not "div1", "div2" etc but e.g "location", "potato", "car" etc.

如何在不为每个div编写相同行的情况下使此代码正常工作？

必须有一种方法可以从您点击的项目中获取class＆amp;然后滚动到同名ID的项目，对吗？或者在这种情况下保持代码更短的任何其他方式 - 否则它只是复制粘贴巨大的文件节日。

Answer 1

try this i hope will work with you :

jQuery('div').on('click', function(e) {
    e.preventDefault();
    jQuery('html,body').animate({scrollTop:jQuery(this.hash).offset().top-100}, 800); 
});

note that : this function will aplay on all divs in page

Answer 2

您可以为每个按钮指定一个类，以便您可以捕获所有按钮，而不是通过查看所单击按钮的属性来转到要滚动的元素：）

HTML

<div class="buttons" data-scroll="div1">div1</div>
<div class="buttons" data-scroll="div2">div2</div>
<div class="buttons" data-scroll="div3">div3</div>

<div class="content" id="div1">some content</div>
<div class="content" id="div2">some content</div>
<div class="content" id="div3">some content</div>

JS

$('.buttons').on('click', function(e) {
    e.preventDefault();

    var scrollTarget = $(this).data("scroll");
    scrollme(scrollTarget);

    function scrollme(target) {
        $('html,body').animate({scrollTop:$("#"+target).offset().top}, 800);  
    }
}); 

示例：http://jsfiddle.net/7gd66kr1/1/

Answer 3

我认为不仅仅是一种独特的解决方案。如果您不想修改HTML，那么您需要一个条件来确定所点击的元素是否为＆＃34;有效＆＃34;之一：

jQuery('div').on('click', function(e) {
    var id = $(this).attr('class');
    var scrollto = $('#' + id);
    if(scrollto.length > 0) {
       e.preventDefault();
       jQuery('html,body').animate({scrollTop:scrollto.offset().top-100}, 800);
    }
});

如果你＆＃34;可以＆＃34;修改你的HTML，将一些属性添加到＆＃34; active＆＃34;元素（那些是按钮），因此您知道它们滚动页面，或将它们放在容器中。您添加的属性可能是一个类或任何其他有效属性（我推荐＆＃34; rel＆＃34;，但可能是＆＃34;数据＆＃34;由@Iliya Reyzis发现，他按类选择并滚动到＆＃34;数据＆＃34;）并通过它选择它们：

<div class="div1" rel="mybutton">div1</div>
jQuery("[rel='mybutton']").on('click', function(e) {
    var id = $(this).attr('class');
    var scrollto = $('#' + id);
    e.preventDefault();
    jQuery('html,body').animate({scrollTop:scrollto.offset().top-100}, 800);
});

希望它有所帮助!!