버튼 클릭시 리스트 스크롤 상단으로 이동하기 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

버튼 클릭시 리스트 스크롤 상단으로 이동하기 정보

HTML 버튼 클릭시 리스트 스크롤 상단으로 이동하기

본문

<div class="scroll">
  <div class="list">1</div>
  <div class="list">2</div>
  <div class="list">3</div>
  <div class="list">4</div>
  <div class="list">5</div>
  <div class="list">6</div>
  <div class="list">7</div>
  <div class="list">8</div>
</div>
<div class="btn-box">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="btn">5</button>
  <button class="btn">6</button>
  <button class="btn">7</button>
  <button class="btn">8</button>
</div>

 

 

.scroll{width:50%;float:left;height:300px;overflow-y:auto;background:#f5f5f5;}
.list{display:block;width:100%;height:100px;border:1px solid #aaa;}
.on{background:#ff0000;}

 

 

import $ from "https://cdn.skypack.dev/jquery@3.6.0";
$(document).ready(function(){
  $('.list').on("click", function(){
    $('.list').removeClass('on');
    $(this).addClass('on');
    var stht = 100;
    var stnb = $(".list").index(this);;
    // $('.wtb-result-box').scrollTop(stht * stnb);
    $('.scroll').animate({scrollTop : stht * stnb}, 300);
  });
  $('.btn').on("click", function(){
    $('.list').removeClass('on');
    var rstht = 100;
    var rstnb = $(".btn").index(this);
    console.log(rstnb);
    // $('.wtb-result-box').scrollTop(rstht * rstnb);
    $('.scroll').animate({scrollTop : rstht * rstnb}, 300);
    $('.list').eq(rstnb).addClass('on');
  });
});

 

이해하기 쉽게 화면으로 설명

3716929041_1654759733.3678.png

 

별거 없는 소스이지만 혹시 필요할까 싶어 저장겸 공유합니다.

스크롤박스가 있고 안에 리스트 클릭시 on 클래스 추가 되면서 스크롤 상단으로 이동,

버튼 클릭시 같은 번호의 리스트가 보여지도록 스크롤 이동되면서 클래스 추가

 

추가설명을 하자면 

버튼 클릭했을때 모든 list의 on 제거한후에 

list의 높이만큼 = 100 곱하기

몇번째 btn인지 구한다음에 = index(this)

그걸 곱해서 scroll의 스크롤값을 입력시킵니다. 

 

 

추천
1

댓글 0개

전체 1,231
퍼블리셔팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT