javascript滚动条各种效果

1.滚动到顶部，这个是最简单的 $list[0].scrollTop = 0; 2.滚动到底部，同样只要获取list的高度，然后设置scrollTop即可 $list[0].scrollTop = $

1.滚动到顶部，这个是最简单的

$list[0].scrollTop = 0;

2.滚动到底部，同样只要获取list的高度，然后设置scrollTop即可

$list[0].scrollTop = $list[0].scrollHeight - $this.height();

3.指定元素滚动到list可视区域的上方

$.fn.scrollCurrentToTop= function(current){    var $this = $(this), $current = $(current), $first = $current.prevAll(':last');    if ($first.length == 0)$first = $current;    var boxHeight = $this.height(), scrollHeight = $this[0].scrollHeight;    //获取相关参数，其中firstTop是用于计算高度差的，对$first元素必须是$list中的第一个可视元素    var currentTop = $current.offset().top, firstTop = $first.offset().top;    var scrollTop = currentTop - firstTop;    $this.animate({scrollTop: scrollTop + 'px'});    return $this;};//使用时只需要调用这个方法即可$list.scrollCurrentToTop($current);

4.指定元素滚动到list可视区域的下方（在3的基础上减去了list和current的高度差即可）

$.fn.scrollCurrentToBottom = function (current) {    var $this = $(this), $current = $(current), $first = $current.prevAll(':last');    if ($first.length == 0)$first = $current;    var boxHeight = $this.height(), height = $current.height(), currentTop = $current.offset().top, firstTop = $first.offset().top;    var scrollTop = currentTop - firstTop;    $this.animate({scrollTop: (scrollTop - boxHeight + height) + 'px'});    return $this;};

5.指定元素滚动到list可视区域的正中间

$.fn.scrollCurrentToMiddle = function(current){    var $this = $(this), $current = $(current), $first = $current.prevAll(':last');    if($first.length == 0) $first = $current;    var boxHeight = $this.height(), scrollHeight = $this[0].scrollHeight;    var height = $current.height(), currentTop = $current.offset().top, firstTop = $first.offset().top;    var scrollTop = currentTop - firstTop;    var scrollOffset = (boxHeight - height) / 2;    $this.animate({scrollTop: (scrollTop - scrollOffset) + 'px'});    return $this;};