滚动到ID功能jQuery

所以我一直在制作onepage网站一段时间，一件事女巫总是很烦我是导航功能女巫我重复的按钮和ID的数量我有。滚动到ID功能jQuery

它看起来像如下：

$('#homeB').click(function() { 
    $('html, body').animate({ 
     scrollTop: $("#home").offset().top 
    }, 1000); 
    return false; 
    }); 
    $("#aboutB").click(function() { 
    $('html, body').animate({ 
     scrollTop: $("#about").offset().top 
    }, 1000); 
    return false; 
    }); 
    $("#winesB").click(function() { 
    $('html, body').animate({ 
     scrollTop: $("#wines").offset().top 
    }, 1000); 
    return false; 
    });

的问题是，如何从这里改变不需要重复的一个小功能。

谢谢。

注意：最好没有第三方插件等保存在JavaScript/jQuery中。

来源

2017-07-26 Idris Dopico Peña

只需使用JQuery类选择器而不是基于id的。所以你必须只写一次。 –

避免编写重复的代码，你可以做一些这样的事情：

$(function(){ 
 
    $('li').on('click',function(e){ 
 
    e.preventDefault(); 
 
    $('html, body').animate({ 
 
     scrollTop: $($(e.target).attr("href")).offset().top 
 
    }, 1000); 
 
    }); 
 
});

nav { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
div { 
 
    margin: 100px 0 0 0; 
 
    width: 100%; 
 
    height: 500px; 
 
} 
 

 
div:nth-child(even) { 
 
    background: #ccc; 
 
} 
 

 
div:nth-child(odd) { 
 
    background: #4c4c4c; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a href="#1">1</a></li> 
 
    <li><a href="#2">2</a></li> 
 
    <li><a href="#3">3</a></li> 
 
    <li><a href="#4">4</a></li> 
 
    </ul> 
 
</nav> 
 

 
<div id='1'></div> 
 
<div id='2'></div> 
 
<div id='3'></div> 
 
<div id='4'></div>

来源

2017-07-26 16:50:50

谢谢！这是我正在寻找的答案。请记住'ul'和'li'元素不应该在导航元素中。 –

function scrollTo($element) { 
    $('html, body').animate({ 
     scrollTop: $element.offset().top 
    }, 1000); 
    return false; 
}

，那么你可以使用它作为

$('#homeB').click(function() { 
    scrollTo($("#home")); 
}); 
$("#aboutB").click(function() { 
    scrollTo($("#about")); 
}); 
$("#winesB").click(function() { 
    scrollTo($("#wines")); 
});

来源

2017-07-26 16:49:32

OP要求不重复，这仍然重复，它只是重复少量。 – CumminUp07

有一对夫妇解决这个问题。如果我那样做，我会做任何被点击一类，然后设置data属性到目的地的ID，这样

<span class='nav_link' data-dest='home2'>Click me to go to home 2</span>

然后，你可以做这样的事情

$('.nav_link').click(function() { 
    var dest = $(this).attr('data-dest'); 
    $('html, body').animate({ 
     scrollTop: $('#'+dest).offset().top 
    }, 1000); 
})

来源

2017-07-26 16:53:07 CumminUp07

滚动到ID功能jQuery

回答

相关问题