在点击li滚动到容器顶部

Question

我有一个UL，高度为overflow:auto。在此UL中，我有一些LI。

我想创建一个函数，单击LI它将放在UL的顶部。

<ul class=list>
 <li>A</li>
 <li>B</li>
 <li>C</li>
 <li>D</li>
 <li>E</li>
</ul>

例如，如果我单击D，它应该移到顶部。

https://codepen.io/andrew_88/pen/mYWdmg

Answer 1

使用.prependTo将li移动到顶部：

$('li').on('click', function() {
  $(this).prependTo($(this).closest("ul"));
  $('.list').animate({scrollTop: 0 }, 1000);
})

更新的代码笔：https://codepen.io/anon/pen/LoWYMq?editors=1111

Answer 2

我认为您想要这样的东西：

$('li').on('click', function() {
  $(this).prependTo($(this).parent())
  $(this).parent().animate({
    scrollTop: 0
  })
})

我还更新了笔here