jquery - 重构此 jQuery 代码

Question

$('.go2page1').click(function() {
  $("body").scrollTo({
    top: '0px',
    left: '0px'
  }, 800);
  return false;
});
$('.go2page2').click(function() {
  $("body").scrollTo({
    top: '0px',
    left: '1100px'
  }, 800);
  return false;
});
$('.go2page3').click(function() {
  $("body").scrollTo({
    top: '0px',
    left: '2200px'
  }, 800);
  return false;
});
$('.go2page4').click(function() {
  $("body").scrollTo({
    top: '0px',
    left: '3300px'
  }, 800);
  return false;
});

这可行，但有几个页面，每个页面都有一个，可以将其压缩为几行，并将“事件”添加到所选页面吗？

Answer 1

$('.go2page').click(function(e) {
    e.preventDefault();
    $('body').scrollTo({
        top: $(this).data('top'),
        left: $(this).data('left')
    }, 800);
});

然后将所有链接设置为class="go2page"data-left="3300px"data-top="0px"(当然，将偏移量替换为正确的偏移量)。

虽然 data- 属性是 HTML5 的东西，但没有浏览器会遇到未知属性的问题，因此代码在所有浏览器中都可以正常工作。除非您使用 HTML5 文档类型，否则 HTML 验证器会提示。