tab切换点击居中处理

原理

1.获取当前对象及当前对象的所有对象的高度和,获取当前父盒子的高度
2.使用jquery的animate动画处理

css样式

*{margin:0;padding:0;}
.parent{list-style-type:none;height:300px;width:120px;overflow-y:scroll;}
.child{height:38px;border-top:2px solid red;background: green;line-height: 38px;}

html代码段

  • 阿里巴巴
  • 腾讯
  • 百度
  • 华为
  • 联想
  • 万科
  • 万达
  • 恒大
  • 小米
  • 京东
  • 格力
  • 美的
  • 海尔

javascript代码段

var 
parentNode = $( '.parent' ),
childHeight = 40,
parentNodeHeight = 300;
$('.child').click(function(){
    var j = $(this).index();
    parentNode.stop().animate({
        scrollTop : childHeight * ( j + 1 ) - parentNodeHeight / 2 // 核心代码
    },600);
});

你可能感兴趣的:(tab切换点击居中处理)