섹션4에 있는 4번째 강의 질문(스크롤링)

반응형 웹사이트 포트폴리오(Architecture Agency)

모바일 네비게이션 퍼블리싱 - a 앵커 만들고 부드럽게 섹션 찾아가기

작성

스크롤링 권장 스크립트 올려주신 부분으로 했는데 작동이 되지 않아 해결 방법 문의 드립니다.

권장

/* Smooth Scrolling */

$('.menu a').click(function(e) {

e.preventDefault();

$.scrollTo(0, 900);

});

문제: 이 스크립트 하기 전에는 menu a를 눌렀을 때 잘 이동했는데 해당 스크립트를 추가하면 작동이 되지 않습니다..

그래서 일단 아래와 같이

  html {
    scroll-behavior: smooth;
  }

해결했더니 다음 챕터에서

.gototop부분에서 같이 스크립트 작성해야 하는 부분이 있네요. 혹시 잘못된 부분이 있을까요?

<!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 	
	<title>DesignWorks Archecture Agency</title>
	<script src="js/jquery-2.1.4.js"></script>
	<!-- Page Scroll Effect JS& CSS -->
	<script src="js/velocity/modernizr.js"></script>
	<script src="js/velocity/velocity.min.js"></script>
	<script src="js/velocity/velocity.ui.min.js"></script>
	<script src="js/velocity/main.js"></script>
	<link rel="stylesheet" href="js/velocity/velocity.css">
	<!-- Smooth Scrolling -->
	<script src="js/jquery.scrollTo.min.js"></script>
	<!-- Custom JS & CSS -->	
	<script src="custom.js"></script>
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="responsive.css">
	<!--FONTASOME CDN-->
	<script src="https://kit.fontawesome.com/c7f55332cf.js" crossorigin="anonymous"></script>
</head>

$(function(){
    /* Trigger*/
    $('.trigger').click(function(){
      $(this).toggleClass('active')
      $('.gnb').toggleClass('active')
    });
    $('section, .menu a').click(function(){
      $('.gnb').removeClass('active')
      $('.trigger').removeClass('active')
    });
    /* Change CSS with Scroll */
    $(window).scroll(function(){
      if($(window).scrollTop() > 50) {
        $('header').addClass('active')
      }
      else {
        $('header').removeClass('active')

      }
    });
    /* Smooth Scrolling */
    $('.menu a').click(function(e){

      e.preventDefault();

      $.scrollTo(0, 900);

    });
});

HTML/CSS jquery 웹-디자인 반응형-웹

답변 2

코딩웍스(Coding Works)

지식공유자

인프런 AI 인턴이 작성해준 글처럼 아래 코드로 바꾸시고 html에 scroll-behavior는 사용하지 마세요.

2가지를 동시에 사용하지 마시고 둘 중에 하나만 사용하세요.

/* Smooth Scrolling */

$('.menu a, .gototop').click(function(e){

e.preventDefault();

$.scrollTo(this.hash || 0, 900);

});

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 시리14님.

질문 주신 Smooth Scrolling 관련 문제에 대해 해결 방법을 안내해 드리겠습니다.

우선, 스크립트가 작동하지 않는 이유는 스크립트 내에 이벤트 객체(e)가 선언되지 않았기 때문일 수 있습니다. 이벤트 객체를 선언하여 preventDefault를 제대로 수행하고 있는지 확인해 보시기 바랍니다.

그리고 jQuery의 scrollTo 메서드를 활용할 때 this.hash를 사용해서 적절한 앵커로 이동할 수 있도록 변경해 주세요.

현재 코드에서 다음과 같이 수정해 보시기 바랍니다.

$(function(){
    /* Trigger */
    $('.trigger').click(function(){
        $(this).toggleClass('active');
        $('.gnb').toggleClass('active');
    });

    $('section, .menu a').click(function(){
        $('.gnb').removeClass('active');
        $('.trigger').removeClass('active');
    });

    /* Change CSS with Scroll */
    $(window).scroll(function(){
        if($(window).scrollTop() > 50) {
            $('header').addClass('active');
        } else {
            $('header').removeClass('active');
        }
    });

    /* Smooth Scrolling */
    $('.menu a, .gototop').click(function(e){
        e.preventDefault();
        $.scrollTo(this.hash || 0, 900);
    });
});

jQuery의 scrollTo를 사용할 때 this.hash를 사용하여 클릭한 앵커의 해시값으로 스크롤 이동을 하도록 코드를 변경했습니다.
.menu a와 .gototop에 대해 동일한 스크롤링 처리가 되도록 했습니다.

관련 질문도 참고하시면서, 정확한 상황에 맞춰 적용해 보세요.
- 슬라이딩 스크롤이 이상하게 먹혀요!
- Smooth Scrolling 질문입니다
- 부드럽게 스크롤이 안됩니다..

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

섹션4에 있는 4번째 강의 질문(스크롤링)