重构这个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验证器会抱怨.