道理
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;
}