頁面回顯時列表滾動到列表的高亮位置處

當劃過按鈕的,回顯數據的時候要把當前顯示的這條數據在列表裏高亮,並且列表將這一條滾動到列表的第一行的位置。
在這裏插入圖片描述
頁面代碼太多了,貼個圖片,就是ul包含li結構
在這裏插入圖片描述
回顯數據就不說了,說一下定位,原本打算是用錨點實現的,後來藍的改了,還沒改成a標籤,就計算了一下當前高亮數據距離頂部的距離,這個數據就是他要滾動的距離。
首先有幾個距離要明確下:

  1. 子元素相對於父元素的位移:$(ele).offset().top、$(ele).offset().left;
  2. 獲取滾動條高度:$(dom).scrollTop();
  3. 設置滾動條高度:$(dom).scrollTop(num);

判斷當出現的條數高度大於盒子的最大高度時(即需要出現滾動條時):
父級盒子滾動條的高度=目標元素相對於父元素的上距離

$("#historyReports li").each(function(ind,ele){
    if($(ele).attr("data-id") == dataId){
        $(ele).addClass("selected").siblings().removeClass("selected");
        if(ind>12){//因爲我的高度是設置的正好放13個,沒有設置的話,也可以直接判斷是否出現滾動條
        	//高亮區所在位置
        	var tarEleHeight2 = $(ele).offset().top - 38.0625;//目標li距離頂部的高度
        	console.log(ind,tarEleHeight,tarEleHeight2)
        	//滾動條的高度
        	$("#historyReports").scrollTop(tarEleHeight2);//就是滾動條要滾動的距離
        }
    }
})
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章