1、是看这边资料的:http://www.365mini.com/page/jquery-scrolltop.htm
当一个区域设置了over-flow-y:scroll,选择的li不在可视区,怎么样让页面初始化时展示这个li呢?
效果图:
怎么做呢?我写的js代码:
//如果当前选择的法院不再可视区,滚动滚动条使其可见
function show_scrollTop(){
var li_height = $(".gy_li").outerHeight(); //li的高度,包括border;
var ul = $(".selected").parent(); //li的父级 ul
var index = 0; //记录第几个li被选中
for(var i=1; i <= ul.children().length; i++){
if($(ul.children()[i-1]).hasClass("selected")){ //如果这个li为选中的li
index = i;
break;
}
}
if(index>7){ //不在可视区,页面上从第8个开始就不再可视区
var top = (index - 7)*li_height*2;
ul.parent().scrollTop(top); //设置overflow-y:scroll 这个元素的scrollTop()
}
}
用到的一些知识点:
$(function(){
var li_top = $(".children .select").offset().top; //offset().top返回的是到当前文档(html)的距离
var li_top2 = $(".children .select").position().top; //position().top返回的是到第一个具有定位的父元素的距离;
$(".parent").scrollTop(50); //$("#id").scrollTop() 返回的是该元素的垂直滚动条上方,隐藏部分的高度;
var li_height = $(".child").height(); // 48px;
//height(): 该高度值不包括元素的外边距(margin)、内边距(padding)、边框(border)等部分的高度。
//outerHeight() 外高度默认包括元素的内边距(padding)、边框(border),但不包括外边距(margin)部分的高度。你也可以指定参数为true,以包括外边距(margin)部分的高度。
var li_height2 = $(".child").outerHeight();
//获取li的高度:
/*
$(element).height(); // 返回数字,例如:100
$(element).css("height"); // 返回字符串,例如:"100px"
*/
})