Cộng đồng Hỏi & Đáp của Inflearn
Không có người viết
Bài viết có thông tin người viết đã bị xóa.
섹션4에 있는 4번째 강의 질문(스크롤링)
Viết
·
140
1
스크롤링 권장 스크립트 올려주신 부분으로 했는데 작동이 되지 않아 해결 방법 문의 드립니다.
권장
<script>
/* 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);
});
});
Câu trả lời 2
0
인프런 AI 인턴이 작성해준 글처럼 아래 코드로 바꾸시고 html에 scroll-behavior는 사용하지 마세요.
2가지를 동시에 사용하지 마시고 둘 중에 하나만 사용하세요.
/* Smooth Scrolling */
$('.menu a, .gototop').click(function(e){
e.preventDefault();
$.scrollTo(this.hash || 0, 900);
});
0
안녕하세요, 인프런 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 질문입니다
- 부드럽게 스크롤이 안됩니다..
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.