Question

如何使用jquery使用漂亮的动画效果垂直滚动到元素？

我有一个像这样的字母菜单：

<ul id="alphabet">
   <li><a href="#A">A</a></li>
   <li><a href="#B">B</a></li>
   <li><a href="#C">C</a></li>
   <li><a href="#D">D</a></li>
   <li><a href="#E">E</a></li>
</ul>

我有另一个列表，最小高度为1000px，溢出：自动

<ul id="list">
<li id="A">...</li>
<li id="B">...</li>
<li id="C">...</li>
<li id="D">...</li>
</ul>

顺便说一下，上面的样本列表看起来很短，但真正的样本列表非常大......

如果我点击第一个列表，让我们说C，我想转到id为C的第二个列表中的li，使用动画效果...如果在第一个列表上单击A，则我想在第二个列表中转到A ......依此类推......换句话说，我将在第二个列表中上下移动

到目前为止，这是我在jquery中的代码

// goto item in list
$('#alphabet a').click(function(e) {
   var clicked = $(this).attr('href').slice(1);

   //goto element in list using a nice animation effect

   $('ul#list').animate({
    ????
   }, 400);
});

我需要帮助在jquery中完成我的代码

提前致谢

Answer 1

请看下面的内容，希望它能满足您的目的。ScrollTo Plugin

Answer 2

您可以对同一http://plugins.jquery.com/project/ScrollTo

使用jQuery scrollTo插件

Answer 3

我相信我找到了答案......这非常优雅......

function scrollTo(ele1, ele2, id) { 
    var a = $(ele1).offset().top;
    var b = $(ele2+'[id='+id+']').offset().top;
    var pos = b - a;

    $(ele1).animate({
        scrollTop: '+=' + pos + 'px'
    }, 400);
}

// jQuery
$('#alphabet a').click(function(e) {
    var clicked = $(this).attr('href').slice(1);

    scrollTo('ul#list', 'ul#list li', clicked);
    e.preventDefault();
});

请随意优化代码！

Thansk提供所有提示和指导马可

如何使用jquery使用漂亮的动画效果垂直滚动到元素？

3 个答案: