jQuery 悬停时滚动到 div 并返回到第一个元素

我基本上有一个具有设定尺寸的 div 和overflow: hidden。该 div 包含 7 个子 div（但一次只显示一个），我希望当它们各自的链接悬停时能够平滑地垂直滚动。

但是，第一部分 (div) 没有链接，并且是没有悬停链接时的默认部分。

看一下这个 jsFiddle 以了解我正在谈论的内容的基本结构：http://jsfiddle.net/YWnzc/ http://jsfiddle.net/YWnzc/

我尝试使用 jQuery scrollTo 来完成此操作，但未能使其正常工作。

任何帮助将不胜感激。谢谢。

像这样的东西吗？

http://jsfiddle.net/YWnzc/5/ http://jsfiddle.net/YWnzc/5/

code:

jQuery("#nav").delegate("a", "mouseenter mouseleave", function (e) {
    var i, self = this,
    pos;

    if (e.type == "mouseleave") {
    i = 0;
    }
    else {
    //Find out the index of the a that was hovered
        jQuery("#nav a").each(function (index) {
            if (self === this) {
            i = index + 1; //the scrollTop is just calculated from this by a multiplier, so increment
            return false;
            }
        });
    }

    //Find out if the index is a valid number, could be left undefined
    if (i >= 0) {

        //stop the previous animation, otherwise it will be queued
        jQuery("#wrapper").stop().animate({
        scrollTop: i * 200
        }, 500);
        //I would retrieve .offsetTop, but it was reporting false values :/
    }

    e.preventDefault();
});