重构此jQuery代码

这是可行的，但是有几个页面，我每个页面都有一个页面，可以将其压缩成几行，还可以将“活动”添加到所选页面

$('.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;
});

然后创建所有链接

class=“go2page”data left=“3300px”data top=“0px”

（当然，用正确的偏移量替换偏移量）

---

虽然

data-

属性是HTML5的东西，但没有浏览器会遇到未知属性的问题，因此代码在所有浏览器中都能正常工作。除非您使用HTML5 doctype，否则HTML验证器会抱怨。

我想我应该尝试一种方法从“page”元素获取偏移量，而不是将偏移量数据存储在链接中（使用+或-修饰符以该元素为中心）

jQuery：

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

HTML:

第1页
第2页
第3页
第4页

data offset=“3300px”只有一个值，但我需要提供两个值？@Nimbuz好吧，然后使用“data top”和“data left”也许？@Nimbuz在ThiefMaster的示例中，他只使用了“data offset”，您可以将其作为“go2page”元素（无论它们是什么）的属性进行编码。我的建议是，您有两个属性，“数据顶部”和“数据左侧”。代码将使用jQuery“.data（）”方法，如ThiefMaster的示例中所示，但它将获取“top”值和“left”值，而不仅仅是单个“offset”。解释了它如何与“data foo”属性一起工作。@Nimbuz:我已经更新了我的答案。即使对你来说，用一些基础知识自己做这件事应该很容易div是绝对定位的。绝对定位的元素仍然具有偏移左/顶值

$('.pageLink').click(function(e) {
    e.preventDefault();

    // Get the page div element
    var $page = $($(this).attr("href"));

    // ScrollTo using the div's offset properties
    $('body').scrollTo({ 
        top: ($page.offset().top - 20) + "px", // scroll 20px above the page element
        left: ($page.offset().left) + "px" 
    }, 800);

    // Set .selected class
    $('.pageLink').removeClass("selected");
    $(this).addClass("selected");
});

<div id="nav">
    <a href="#page1" class="pageLink selected">Page 1</a>
    <a href="#page2" class="pageLink">Page 2</a>
    <a href="#page3" class="pageLink">Page 3</a>
    <a href="#page4" class="pageLink">Page 4</a>
</div>

<div id="page1" class="page">Page 1</div>
<div id="page2" class="page">Page 2</div>
<div id="page3" class="page">Page 3</div>
<div id="page4" class="page">Page 4</div>