이전 목록 다음
채택완료

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

심심한나쵸
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 2,854

3554271915_1686204030.5436.png

 

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

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

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

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

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

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

 

메뉴 소스

Copy 
<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>

 

이동해야할 섹션

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

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

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

 

현재 js코드

 

Copy 
for (let i = 0; i < $('.sctNav').length; i++) {

        $('.sctNav').eq(i).click(function(){ // i번째 탭버튼 클릭 시

            $('li').removeClass("on");

            $(this).addClass("on");

 

        });

     }

 

 

 

javascript 스크롤 for문
|

답변 2개 / 댓글 2개

채택된 답변
+20 포인트
배배르만
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전

Copy 
<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>

답변에 대한 댓글 2개

심심한나쵸
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
와 너무 감사합니다..이렇게 하면 되는거였군요...
혹시 그럼 메뉴를 클릭했을 경우가 아니라 그냥 스크롤을 내렸을때 해당 섹션의 메뉴에 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');
});
배르만
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
[code]
<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>
[/code]
제제이앤
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전

참고를 해보시겠어요?

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); // 스크롤 이동 애니메이션
    });
}
 

답변을 작성하려면 로그인이 필요합니다.