목록으로

class값으로 해당 섹션 스크롤 구현하기 채택완료

심심한나쵸 2년 전 조회 2,580

답변 2

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

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

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

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

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

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

메뉴 소스

</p>

<p><div class="acfIntNav"></p>

<p>                <ul></p>

<p>                    <li class="sctNav on"><a href="javascript:;">메뉴1</a></li></p>

<p>                    <li class="sctNav"><a href="javascript:;">메뉴2</a></li></p>

<p>                    <li class="sctNav"><a href="javascript:;">메뉴3</a></li></p>

<p>                    <li class="sctNav"><a href="javascript:;">메뉴4</a></li></p>

<p>                    <li class="sctNav"><a href="javascript:;">메뉴5</a></li></p>

<p>                </ul></p>

<p>            </div></p>

<p>

이동해야할 섹션

</p>

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

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

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

<p>

현재 js코드

</p>

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

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

<p>            $('li').removeClass("on");</p>

<p>            $(this).addClass("on");</p>

<p> </p>

<p>        });</p>

<p>     }</p>

<p>

#javascript #스크롤 #for문

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

답변 2개

정렬:

채택된 답변

+20 포인트

배르만

2년 전

</p>

<p><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;

}</p>

<p>.sctCnt {

  height: 100em;

}

</style></p>

<p><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></p>

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

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

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

<p><script src="<a href="http://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.min.js"></script></a>

<script>

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

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

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

      $(this).addClass("on");</p>

<p> </p>

<p>      if ($('.sctCnt').eq(i).get(0) != null) {

        let top = $('.sctCnt').eq(i).offset().top;

        // $(document).scrollTop(top);

        $('body').animate({scrollTop: top});

      }

  });

}

</script></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 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]

[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");

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

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

로그인 후 평가할 수 있습니다

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

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

로그인

class값으로 해당 섹션 스크롤 구현하기 채택완료

답변 2개

답변에 대한 댓글 2개

공유하기