class값으로 해당 섹션 스크롤 구현하기

class값으로 해당 섹션 스크롤 구현하기

QA

class값으로 해당 섹션 스크롤 구현하기

본문

3554271915_1686204030.5436.png

 

페이지 우측에 고정되어 있는 서브 메뉴입니다.

현재 상황상 html소스에 id값을 부여할 수 없고 a태그 사용이 어려워

class명을 넣어 컨트롤 해야 하는 상황인데요,,

클릭했을때 저 메뉴에 on이 켜지면서 해당 섹션으로 이동해야 합니다.

eq를 사용해서 for문을 돌리면 된다고 하는데 어떻게 짜야할지 감이 안옵니다.ㅠㅠ

현재 sctNav에 on class추가하는 것까지는 했는데 해당 섹션에 스크롤을 넣어야 하는데 어떻게 짜면 좋을까요?

 

메뉴 소스


<div class="acfIntNav">
                <ul>
                    <li class="sctNav on"><a href="javascript:;">메뉴1</a></li>
                    <li class="sctNav"><a href="javascript:;">메뉴2</a></li>
                    <li class="sctNav"><a href="javascript:;">메뉴3</a></li>
                    <li class="sctNav"><a href="javascript:;">메뉴4</a></li>
                    <li class="sctNav"><a href="javascript:;">메뉴5</a></li>
                </ul>
            </div>

 

이동해야할 섹션


<div class="sctCnt"></div>
<div class="sctCnt"></div>
<div class="sctCnt"></div>

 

현재 js코드

 


 for (let i = 0; i < $('.sctNav').length; i++) {
        $('.sctNav').eq(i).click(function(){ // i번째 탭버튼 클릭 시
            $('li').removeClass("on");
            $(this).addClass("on");
 
        });
     }

 

 

 

이 질문에 댓글 쓰기 :

답변 2


<style>
.acfIntNav {
  background-color: f5f5f5;
  position: fixed;
  right: 0;
}
.acfIntNav ul {
  list-style-type: none;
  width: 10em;
  padding: 0;
  margin: 0;
}
.acfIntNav ul li.sctNav {
  text-align: right;
}
.acfIntNav ul li.sctNav a {
  text-decoration: none;
  color: #aaa;
  display: inline-block;
  font-weight: bold;
  padding: 0 0.4em 0 1em;
  margin: 0.2em 0;
  border-radius: 1em;
}
.acfIntNav ul li.sctNav a::after {
  content: 'ㆍ';
  font-size: 1.5em;
  vertical-align: middle;
}
.acfIntNav ul li.sctNav.on a {
  background-color: #333;
  color: #eee;
}
.sctCnt {
  height: 100em;
}
</style>
<div class="acfIntNav">
    <ul>
        <li class="sctNav on"><a href="javascript:;">메뉴1</a></li>
        <li class="sctNav"><a href="javascript:;">메뉴2</a></li>
        <li class="sctNav"><a href="javascript:;">메뉴3</a></li>
        <li class="sctNav"><a href="javascript:;">메뉴4</a></li>
        <li class="sctNav"><a href="javascript:;">메뉴5</a></li>
    </ul>
</div>
<div class="sctCnt">1</div>
<div class="sctCnt">2</div>
<div class="sctCnt">3</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
for (let i = 0; i < $('.sctNav').length; i++) {
  $('.sctNav').eq(i).click(function(){ // i번째 탭버튼 클릭 시
      $('li').removeClass("on");
      $(this).addClass("on");
 
      if ($('.sctCnt').eq(i).get(0) != null) {
        let top = $('.sctCnt').eq(i).offset().top;
        // $(document).scrollTop(top);
        $('body').animate({scrollTop: top});
      }
  });
}
</script>

와 너무 감사합니다..이렇게 하면 되는거였군요...
혹시 그럼 메뉴를 클릭했을 경우가 아니라 그냥 스크롤을 내렸을때 해당 섹션의 메뉴에 class on을 추가하려면 어떻게 해야 할까요..?ㅠㅠ

현재 올려주신 코드를 참고하여 작성하였습니다.

$(".nav li").click(function() {
  $("li").removeClass("on");
  $(this).addClass("on");

  var idx = $(this).index();
  idx1 = $(".sctCnt").eq(idx);
 
  $('html,body').animate({
    scrollTop: $(idx1).offset().top},'slow'); 
});


<style>
.acfIntNav {
  background-color: f5f5f5;
  position: fixed;
  right: 0;
}
.acfIntNav ul {
  list-style-type: none;
  width: 10em;
  padding: 0;
  margin: 0;
}
.acfIntNav ul li.sctNav {
  text-align: right;
}
.acfIntNav ul li.sctNav a {
  text-decoration: none;
  color: #aaa;
  display: inline-block;
  font-weight: bold;
  padding: 0 0.4em 0 1em;
  margin: 0.2em 0;
  border-radius: 1em;
}
.acfIntNav ul li.sctNav a::after {
  content: 'ㆍ';
  font-size: 1.5em;
  vertical-align: middle;
}
.acfIntNav ul li.sctNav.on a {
  background-color: #333;
  color: #eee;
}
.sctCnt {
  height: 100em;
}
</style>
<div class="acfIntNav">
    <ul class="nav">
        <li class="sctNav on"><a href="javascript:;">메뉴1</a></li>
        <li class="sctNav"><a href="javascript:;">메뉴2</a></li>
        <li class="sctNav"><a href="javascript:;">메뉴3</a></li>
        <li class="sctNav"><a href="javascript:;">메뉴4</a></li>
        <li class="sctNav"><a href="javascript:;">메뉴5</a></li>
    </ul>
</div>
<div class="sctCnt">1</div>
<div class="sctCnt">2</div>
<div class="sctCnt">3</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
/*for (let i = 0; i < $('.sctNav').length; i++) {
  $('.sctNav').eq(i).click(function(){ // i번째 탭버튼 클릭 시
      $('li').removeClass("on");
      $(this).addClass("on");
 
      if ($('.sctCnt').eq(i).get(0) != null) {
        let top = $('.sctCnt').eq(i).offset().top;
        // $(document).scrollTop(top);
        $('body').animate({scrollTop: top});
      }
  });
}*/
var scrolling = true;

$(".nav li").click(function() {
  $("li").removeClass("on");
  $(this).addClass("on");

  var idx = $(this).index();
  idx1 = $(".sctCnt").eq(idx);
 
  if (idx1.get(0) != null) {
    scrolling = false;
    $('html,body').animate(
      {scrollTop: $(idx1).offset().top},
      'slow',
      function () { scrolling = true; }
    ); 
  }
});

$(document).on('scroll', function (evt) {
  if (scrolling == false) {
    return;
  }

  var scrolltop = $(document).scrollTop();
  var scrollidx = -1;
  $('.sctCnt').each(function (i, el) {
    if ($(el).offset().top <= scrolltop) {
      if ($(".nav li").eq(i).get(0) != null) {
        scrollidx = i;
      }
    }
  });

  if (scrollidx > -1 && $(".nav li").eq(scrollidx).get(0) != null) {
    $(".nav li").removeClass("on");
    $(".nav li").eq(scrollidx).addClass("on");
  }
});
</script>

참고를 해보시겠어요?

for (let i = 0; i < $('.sctNav').length; i++) {
    $('.sctNav').eq(i).click(function(){ // i번째 탭버튼 클릭 시
        $('li').removeClass("on");
        $(this).addClass("on");

        let targetSection = $('.sctCnt').eq(i); // i번째 섹션을 가져옴
        let scrollTo = targetSection.offset().top; // 해당 섹션의 상단 위치

        $('html, body').animate({ scrollTop: scrollTo }, 500); // 스크롤 이동 애니메이션
    });
}
 

답변을 작성하시기 전에 로그인 해주세요.
전체 138
QA 내용 검색

회원로그인

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