重構這個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>