Javascript 可从类链接上下滚动ul列表

我想根据单击的按钮上下滚动新闻文章列表

如果可能的话，我想采用这种动画方式：

function smoothAdd(id, text)
{
    var el = $('#scroller' + id);

    var h = el.height();

    el.css({
        height:   h,
        overflow: 'hidden'
    });

    var ulPaddingTop = parseInt(el.css('padding-top'));
    var ulPaddingBottom = parseInt(el.css('padding-bottom'));

    el.prepend('<li>' + text + '</li>');

    var first = $('li:first', el);
    var last  = $('li:last',  el);

    var foh = first.outerHeight();

    var heightDiff = foh - last.outerHeight();

    var oldMarginTop = first.css('margin-top');

    first.css({
        marginTop: 0 - foh,
        position:  'relative',
        top:       0 - ulPaddingTop
    });

    last.css('position', 'relative');

    el.animate({ height: h + heightDiff }, 1500)

    first.animate({ top: 0 }, 250, function() {
        first.animate({ marginTop: oldMarginTop }, 1000, function() {
            last.animate({ top: ulPaddingBottom }, 250, function() {
                last.remove();

                el.css({
                    height:   'auto',
                    overflow: 'visible'
                });
            });
        });
    });
}

  $('.scrollUp').click(function() {
      smoothAdd('scrollUp', 'A new item');
  });

函数smoothAdd（id，文本）
{
var el=$（“#滚动器”+id）；
var h=标高高度（）；
el.css({
高度:h,，
溢出：“隐藏”
});
var ulPaddingTop=parseInt（el.css（'padding-top'）；
var ulPaddingBottom=parseInt（el.css（'padding-bottom'）；
el.prepend（“
”+文本+”
）；
var first=$（'li:first'，el）；
var last=$（'li:last'，el）；
var foh=first.outerHeight（）；
var heightDiff=foh-last.outerHeight（）；
var oldMarginTop=first.css（'margin-top'）；
first.css({
马金托普：0-foh，
位置：'相对'，
顶部：0-ulPaddingTop
});
css（'position'，'relative'）；
el.animate（{height:h+heightDiff}，1500）
动画（{top:0}，250，function（））{
首先，设置动画（{marginTop:oldmagintop}，1000，function（）{
动画（{top:ulPaddingBottom}，250，function（））{
最后，删除（）；
el.css({
高度：“自动”，
溢出：“可见”
});
});
});
});
}
$（'.scrollUp'）。单击（函数（）{
smoothAdd（'scrollUp'，'aNewItem'）；
});

示例如下：

我的HTML如下所示：

  <ul id="scroller">
      <li class="current"><span>/</span><a href="#article1">News Article Title</a></li>
      <li><span>/</span><a href="#article2">News Article Title 2</a></li>
      <li><span>/</span><a href="#article3">News Article Title 3</a></li>
  </ul>
  <div class="btnWrap"><p><a href="#arrow" class="scrollUp">Scroll Up</a>
  <a href="#arrow" class="scrollDown">Scroll Up</a></p></div>

/
/
/

谁能给我指出正确的方向吗

---

基本上保持动画样式，但按照正常旋转木马将其保留为定义的UL

我更改了几行代码：

var el=$（“#滚动器”+id）到
var el=$（'#'+id）

及

smoothAdd（'scrollUp'，'A new item'）到
smoothAdd（'scroller'，'A new item'）

请参见此处：

我从头开始写。正如您所注意到的，我直接在css文件中添加了css，这比通过jquery添加css要好，特别是对于将来的维护/装饰等，但我没有花太多时间进行不同的计算。这是一个蓝图，我想，你可以修改，使它更好，像使顶部和底部相结合，使功能小或诸如此类的事情，我只是没有时间了。。。再次强调：自己根据css重做计算并修改它

编辑：关于可变高度，您需要记住，我还没有完成整个功能。编写此函数的下一步是自动计算页边距顶部和页边距顶部，而不是手动输入它们，这非常简单。所需要的只是传递一个变量来获得li元素的位置和维度，然后将它们传递给我们的代码。
我提出了一个稍微简单的解决方案。看看

您不需要乱用
绝对
或
相对
位置，也不需要乱用
顶部
。该列表具有
height
和
auto
一样的属性，因此它会根据其
li
元素的高度进行增减

编辑
现在，高度将自动调整以显示所有项目

还支持
li
任何高度的元素。
如果我们有完整的li列表，而不是添加文本，我们只需隐藏或按顺序显示它们，效果相同，那么任何帮助都会非常感激。当它到达列表的顶部时，它就停止了？在这种情况下，您可能需要查看一些插件。例如：谢谢，但如果可能的话，我想保持同样的效果。我明天要参加期末考试（这是一次医学考试，如果我们不及格，我们就得重考一整年！！！）但我发现你的问题很有趣，花了3个小时：Dp.s。对于其他人，请随意使用我的代码，但是如果你提到我的别名（hakim sina），我真的很感激>你的解决方案不支持可变高度的项目，正如Andy postedwell的文章所述。如果你读了我的文章，我确实提到我很快就完成了它，并且没有完全开发整个项目（我相信安迪不想要，也不应该想要）…我所提供的是这类任务的基本框架，例如，对于可变高度，您只需在代码中再添加一个变量。请不要贬低我的努力，并做出更真诚的批评。我不会以任何方式贬低您的努力。我只是做了一个有效的评论，如果您误解了，很抱歉。是的，这是一个obvi这是一个很好的选择，但是如果你注意到了这个问题，Andy也想要这个效果…正如我之前提到的，你的代码绝对是实现Andy想要的更简单版本的最快捷方式，但是如果你注意到Andy发布的源代码，那不是你所创造的效果…请看我的代码well@hakim-新浪辩诉现在请检查我的新代码，我已更改为更平滑的版本