Question

这个Jquery代码使我页面上的箭头滚动页面。我觉得有更好更短的方法来做到这一点。

//Functions that make the arrows on the page scroll through the page.
$("#arrow1").click(function() {
  $('html, body').animate({
      scrollTop: $("#aboutMe").offset().top
  }, 1000);
});

$("#arrow2").click(function() {
  $('html, body').animate({
      scrollTop: $("#skillsPart").offset().top
  }, 1000);
});

$("#arrow3").click(function() {
  $('html, body').animate({
      scrollTop: $("#contactMe").offset().top
  }, 1000);
});

$("#arrow4").click(function() {
  $('html, body').animate({
      scrollTop: $("#topPart").offset().top
  }, 1000);
});

Answer 1

您可以创建一个可重复使用的函数，只需添加要滚动到els数组的元素和元素

，就可以轻松添加更多点击处理程序

var main = $('html, body');
function handleClick(el, scrollToEl) {
    el.click(function() {
    main.animate({
      scrollTop: scollToEl.offset().top
    }, 1000);
  })
}

var els = [
  [$('#arrow1'), $("#aboutMe")],
  [$('#arrow2'), $("#skillsPart")],
  [$('#arrow3'), $("#contactMe"],
  [$('#arrow4'), $("#topPart")]
];

els.forEach(function(el){
    handleClick(el[0], el[1]);
});

Answer 2

我得到的答案可能不是你想要的，但我猜还是......

$("#arrow1,#arrow2,#arrow3,#arrow4").click(function() {
  var a1 = $("#aboutMe").offset().top,
    a2 = $("#skillsPart").offset().top,
    a3 = $("#contactMe").offset().top,
    a4 = $("#topPart").offset().top;
  switch ($(this).attr("id") {
    case "arrow1":
      $('html, body').animate({
        scrollTop: a1
      }, 1000);
      break;
    case "arrow2":
      $('html, body').animate({
        scrollTop: a2
      }, 1000);
      break;
    case "arrow3":
      $('html, body').animate({
        scrollTop: a3
      }, 1000);
      break;
    case "arrow4":
      $('html, body').animate({
        scrollTop: a4
      }, 1000);
      break;
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

https://jsfiddle.net/mn6184p1/2/

我可以将所有这些代码组合成一个函数，或者这是唯一的方法吗？

2 个答案: