重构这个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验证程序会抱怨。

Answer 2

，而不是将数据存储在我想我会尝试的方法从“页”元素，以获得偏移的链接偏移（以+或 - 调节剂以该元素的中心）

http://jsfiddle.net/pxfunc/jDFJw/

的jQuery：

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

HTML：

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