Question

所以我现在已经制作了一个页面网站了一段时间，女巫总是让我烦恼的一件事就是导航功能，我会重复按钮和id的数量。

如下所示：

$('#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中。

Answer 1

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

Answer 2

为避免编写重复代码，您可以执行以下操作：

$(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>

Answer 3

有几种方法可以解决这个问题。如果我要这样做，我会做任何被点击的类，然后将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);
})

滚动到id函数jQuery

3 个答案: