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

我基本上有一个具有设置维度和

溢出：隐藏的div。该div包含7个子div（但一次只显示一个子div），当它们各自的链接悬停时，我希望能够平滑地垂直滚动它们

但是，第一部分（div）没有链接，并且在没有链接悬停时是默认部分

看看这个JSFIDLE，看看我所说内容的基本结构：

我曾尝试使用jQuery scrollTo来完成这一点，但未能使其正常工作

任何帮助都将不胜感激。谢谢。
仅供参考：您发给我的JSFIDLE转到了MooTools框架，而不是jQuery。。。仅供参考。（可能是它不起作用的原因吧

完全复制并粘贴此代码，它将在jQuery中用于动画滚动

试着在DIV中平滑滚动，我测试过了-效果很好。你呢

    $(function() {

    function filterPath(string) {
        return string
        .replace(/^\//,'')
        .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
        .replace(/\/$/,'');
    }

    var locationPath = filterPath(location.pathname);
    var scrollElem = scrollableElement('#wrapper');

    // Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
    $('a[href*=#]').each(function() {

        // Ensure it's a same-page link
        var thisPath = filterPath(this.pathname) || locationPath;
        if (  locationPath == thisPath
            && (location.hostname == this.hostname || !this.hostname)
            && this.hash.replace(/#/,'') ) {

                // Ensure target exists
                var $target = $(this.hash), target = this.hash;
                if (target) {

                    // Find location of target
                    var targetOffset = $target.offset().top;
                    $(this).click(function(event) {

                        // Prevent jump-down
                        event.preventDefault();

                        // Animate to target
                        $(scrollElem).animate({scrollTop: targetOffset}, 400, function()      {

                            // Set hash in URL after animation successful
                            location.hash = target;

                        });
                    });
                }
        }

    });

    // Use the first element that is "scrollable"  (cross-browser fix?)
    function scrollableElement(els) {
        for (var i = 0, argLength = arguments.length; i <argLength; i++) {
            var el = arguments[i],
            $scrollElement = $(el);
            if ($scrollElement.scrollTop()> 0) {
                return el;
            } else {
                $scrollElement.scrollTop(1);
                var isScrollable = $scrollElement.scrollTop()> 0;
                $scrollElement.scrollTop(0);
                if (isScrollable) {
                    return el;
                }
            }
        }
        return [];
    }

});

$（函数（）{
函数筛选器路径（字符串）{
返回字符串
.替换（/^\/，''）
.replace（/（索引|默认值）。[a-zA-Z]{3,4}$/，“”）
.替换（/\/$/，''）；
}
var locationPath=filterPath（location.pathname）；
var scrolleem=scrollableElement（“#包装器”）；
//其中包含哈希标记的任何链接（无法执行^=操作，因为具有完全限定的URL潜力）
$（'a[href*=#]'）。每个（函数（）{
//确保它是同一个页面链接
var thisPath=filterPath（this.pathname）| | locationPath；
如果（locationPath==此路径
&&（location.hostname==this.hostname | |！this.hostname）
&&this.hash.replace（/#/，''）{
//确保目标存在
var$target=$（this.hash），target=this.hash；
如果（目标）{
//找到目标的位置
var targetOffset=$target.offset（）.top；
$（此）。单击（函数（事件）{
//防跳
event.preventDefault（）；
//为目标设置动画
$（scrollElem）.animate（{scrollTop:targetOffset}，400，function（）{
//动画成功后在URL中设置哈希
location.hash=目标；
});
});
}
}
});
//使用第一个“可滚动”的元素（跨浏览器修复？）
函数可滚动元素（els）{
对于（var i=0，argLength=arguments.length；i
类似的内容


代码：

下面是一个工作示例：

代码（与rizzle的代码非常相似，我将解释一些变化）：

首先，
var selector=$（this）.data（'section'）；
因为在jsFiddle中，href属性返回页面的完整路径+散列。所以我将其更改为html5数据属性（
data section
）

下一行与rizzle的类似，只是我们获取了部分的偏移量，并将其添加到
#wrapper
的当前
值中。正如他所指出的，仍然存在一些奇怪的偏移量问题，我发现减去129就成功了。而这129数字看起来可能是类似的为了打破僵局，我测试了改变分区大小，使其不相等，等等，它继续工作。我使用的是Chrome，也许非webkit浏览器需要一个不同的常数来减去。但看起来129数字至少是某种常数

其余的应该是不言自明的

需要注意的一点是：当您将光标移动到
标记上时，
#wrapper
div的内容似乎会跳转，但这只是因为光标移动时会短暂触发悬停事件的mouseleave部分。我相信您可以解决这个问题：）
除了上面提到的偏移量问题外，效果非常好。有没有办法让滚动动画化？啊，当然，错过了这一部分：）添加了一些动画。给你，简化了很多。效果绝对完美！谢谢！注意，大多数android浏览器和旧版iOS不支持滚动DIV下载答案，只是因为你在任何.animation（）之前只缺少了.stop（）-这实际上解决了你示例中的问题！：
$("#nav a").hover(function () {
    var sectionName =  $(this).attr("href");
    var sectionPos = $(sectionName).offset().top;
    var wrapperPos = $("#wrapper").offset().top;
    var wrapperScroll = $("#wrapper").scrollTop();
    var scrollPos = sectionPos - wrapperPos + wrapperScroll;
    $("#wrapper").stop().animate({scrollTop:scrollPos}, 600);
}, function () {  $("#wrapper").stop().animate({scrollTop:0}, 600); });

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

$('a').hover(function(){
    var selector  = $(this).data('section');
    var scrollAmount = $(selector).offset().top + $('#wrapper')[0].scrollTop - 129;
    $('#wrapper').animate({scrollTop: scrollAmount}, 250);
},function(){
    $('#wrapper').animate({scrollTop: 0}, 250);
});