활성 목록 자동 스크롤 상단 만들기

이 경우 아래 이미지와 같은 데이터 목록이 있습니다. 최상위 순서를 다시 새로 고치는 대신 활성 클래스가 있는 목록이 맨 위에 있기를 원합니다.

전제 조건

함수 자바스크립트offset().top , .toFixed(0) 단 scrollTop()

제이쿼리

1. HTML 구조

스크립트 생성을 수행할 때 가장 먼저 해야 할 일은 이 경우 스크립트가 처리/캡처해야 하는 부분을 파악하는 것입니다. id="myTabContent" 및 class="list-active" .

<div id="myTabContent">
 <div class="px-3">
  <div class="row border-bottom">
    <div class="col-2"><b>Hari</b></div>
    <div class="col-5"><b>Tanggal</b></div>
    <div class="col-5"><b>Ayat</b></div>
  </div>
  <a href="#">
  <div class="row list list-active">
    <div class="col-2">260</div>
    <div class="col-5">2021-12-30</div>
    <div class="col-5">Why 22</div>
  </div>
  </a>
  <a href="#">
  <div class="row list ">
    <div class="col-2">259</div>
    <div class="col-5">2021-12-29</div>
    <div class="col-5">Why 21</div>
  </div>
  </a>
... dst
 </div>
</div>

2. 위치 스크립트 핸들

위치를 처리하려면 먼저 초기 목록(conNum) 및 목록 활성(itmNum)의 위치 데이터를 알아야 합니다. offset().top 함수에서 얻은 데이터는 위치 번호 형식이고 toFixed(0)는 숫자를 반올림하는 함수입니다. 그런 다음 그것을 얻은 후 scrollTop(difference between itmNum position and conNum)를 수행하십시오. 단계별로:

객체 컨테이너 목록 선언

성명서 conNum 및 itmNum

scrollTop()를 실행합니다. 기능

var con = $("#myTabContent"),
    conNum = con.offset().top.toFixed(0),
    itmNum = $("#myTabContent .list-active").offset().top.toFixed(0);
con.scrollTop(itmNum-conNum-15);

완료