Question

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

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

看看这个jsFiddle，看看我所谈论的基本结构：http://jsfiddle.net/YWnzc/

我试图用jQuery scrollTo来完成这个，但是还没能让它工作。

非常感谢任何帮助。感谢。

Answer 1

这样的东西？

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

代码：

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

Answer 2

仅供参考：您发送给我的JSFIDDLE去了MooTools框架，而不是jQuery ... fyi。（可能是为什么它不起作用？

完全复制并粘贴此代码，它将在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 [];
    }

});

仅供参考：虽然我稍微调整了代码，但是这个代码的功劳并没有作为个人开发人员使用。此代码的所有者和创建者是Chris Coyier，您可以在此处找到有关此滚动代码的更多信息： http://css-tricks.com/snippets/jquery/smooth-scrolling/

Answer 3

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

Answer 4

以下是一个工作示例：http://jsfiddle.net/YWnzc/7/

代码（非常类似于rizzle＆＃39; s，有一些我将要解释的变化）：

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

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

下一行与rizzle相似，只是我们抓取该部分的偏移量并将其添加到scrollTop的当前#wrapper值。正如他所指出的那样，仍有一些奇怪的偏移问题正在发生，我发现减去129就可以了。虽然这个129号可能看起来像是可能破坏的东西，但我确实测试了改变各个部分的大小，使它们不相等等等，并且它继续工作。我使用的是Chrome，也许非webkit浏览器需要一个不同的常量来减去。但似乎129号码至少是某种常数。

其余的应该是不言自明的。

有一点需要注意：当您将光标移到<a>标签上时，#wrapper div的内容似乎会跳转，但这仅仅是因为鼠标的一部分当光标移动时，悬停事件会短暂触发。我确定你可以解决那个问题：）

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

4 个答案: