使用Jquery进行前进和后退导航

Question

我希望通过jQuery控制简单的前进/后退导航。目前我有以下代码：

$("#main-navigation a").bind("click",function(event){
    event.preventDefault();

    var target = $(this).attr("href");
    $("html, body").stop().animate({
        scrollLeft: $(target).offset().left,
        scrollRight: $(target).offset().right
    }, 1200,'easeInOutBack');
});

和HTML

<nav id="main-navigation">
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</nav>  

<div id="home" class="panel">
    <div class="wrapper">
        <img src="images/landing.png" width="1024" height="768" title="landing page" />

    </div>
</div>

<div id="explore" class="panel">
    <div class="wrapper">
        <img src="images/pageTwo.png" width="1024" height="768" title="page" />

    </div>
</div>

最终DOM有很多div，所以我想要一个相对简单的方法让jQuery在每个div之间移动（前进和后退），希望不用求插件。

我怎样才能做到这一点？

提前致谢