如何在鼠标悬停链接时，使用jQuery使一个div滚动到另一个div？

Question

如何在鼠标悬停链接时，使用jQuery使一个div滚动到另一个div？

jqueryhtmlscroll

3

很难解释，我知道...特别是因为我完全是编程概念的新手。

但是我希望在鼠标悬停在右侧链接上时，更改标志以使其与链接相对应。我希望它可以动画显示，以便“滚动”到正确的标志，在这方面某些网站一直在做。

所有标志都包含在一个div中，并且都有自己的类（如果需要）。链接也是如此。

我确信你们中的jQuery高手可以用几行代码解决这个问题...或者指引我去找教程。帮帮我！

编辑：好的，虽然jAndy的提交非常有用，但我不知道如何编写它。我这么做对吗？

<div id="nav">
    <div id="nav_left">
        <h1 class="home"><em>name</em>:home</h1>
        <h1 class="about"><em>name</em>:about</h1>
        <h1 class="folio"><em>name</em>:folio</h1>
        <h1 class="contact"><em>name</em>:contact</h1>
    </div>
    <div id="nav_right">
        <ul>
            <li><a href="#" class="lhome">Home</a></li>
            <li><a href="#" class="labout">About Me</a></li>
            <li><a href="#" class="lfolio">Portfolio</a></li>
            <li><a href="#" class="lcontact">Contact Me</a></li>
        </ul>
    </div>
</div>

- jordsta

确实很困难。您能提供一个展示所需行为的网站链接吗？ - Darin Dimitrov

我会尝试并看看我能找到什么。 - jordsta

3个回答

1

看看 Ariel Fleslers 的 scrollTo 插件

- redsquare

0

尽管jAndy的答案可能是你想要的...我想分享另一种方法，可以在这个演示中看到

我曾经回答过一个之前的问题，使用了一个菜单系统，通过点击后滚动一个div来实现。我只需将click更改为mouseover即可更新演示。

- Mottie

实际上，我觉得你的方法很适合。等我电脑恢复正常后，大约一两天之后，我会试一下这个方法。 - jordsta

我实际上已经把那段代码改成了一个插件，你可以在这里查看：https://github.com/Mottie/visualNav - Mottie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jAndy · Accepted Answer

轻松愉快的样子看起来类似于这个例子：

$('a.MyAnchorClass').bind('mouseenter', function(){
    $('div.MyDivClassWithLogos').animate({
       'scrollTop':    $('img.MyImgClass').offset().top
    }, 1500);
});

Example: http://jsbin.com/uliti3/2/edit

$(document).ready(function(){
    $('#nav_left').find('h1').each(function(i,v){
       $.data(this, 'pos', $(this).offset());
    });

    $('#nav_right').find('a').bind('mouseenter', function(e){
       var _target = '.' + e.target.className.substr(1);

       $('#nav_left').stop(true, false).animate({
           'scrollTop':  $(_target).data('pos').top
       }, 1500);
    });
});