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代碼段

<ul class="parent">
    <li class="child">阿里巴巴</li>
    <li class="child">騰訊</li>
    <li class="child">百度</li>
    <li class="child">華爲</li>
    <li class="child">聯想</li>
    <li class="child">萬科</li>
    <li class="child">萬達</li>
    <li class="child">恆大</li>
    <li class="child">小米</li>
    <li class="child">京東</li>
    <li class="child">格力</li>
    <li class="child">美的</li>
    <li class="child">海爾</li>
</ul>

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);
});

url參數獲取

const getUrlParam = function ( mid, hashOn=false ) {
  const reg = new RegExp("(^|&)" + mid + "=([^&]*)(&|$)");
  const util = idx => window.location[ idx ].substr(1).match(reg);
  const r = util('search') || ( hashOn && util( 'hash' ) ) || null;
  if ( r != null )  
    return decodeURIComponent( r[2] ); 
  return null;
}