섹션4에 있는 4번째 강의 질문(스크롤링)
149
작성자 없음
0 asked
스크롤링 권장 스크립트 올려주신 부분으로 했는데 작동이 되지 않아 해결 방법 문의 드립니다.
권장
<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);
});
});
Answer 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 질문입니다
- 부드럽게 스크롤이 안됩니다..
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
full reload 질문
1
180
3
안녕하세요. 질문있어서 조심스레 글을 올려봅니다.
1
197
1
브라켓 라이브 실행시 실행오류때문에 진도가안나갑니다..ㅠㅠ
1
317
3
css full reload 문제가 발생하여 질문드립니다!
1
315
3
파일 내 index.html에 대한 오류
1
264
1
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 부분 해결되지 않아 재 질문 드립니다ㅠㅠ
1
207
1
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기 질문입니다
0
218
2
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 다시 수정하여 질문드립니다!
1
201
2
모바일 네비게이션 퍼블리싱 ㅡ모바일트리거,GNB 보이기 감추기 부분 질문드립니다.
1
255
3
크로스브라우징-크롬
1
280
2
섹션 17 하드코딩으로 이미지맵 만들기 부분 연습파일이 없어요..
0
256
1
line-hieght를 em 단위로 쓰는 것에 대하여 질문 드립니다
1
217
1
슬릭 슬라이더 dots 보이게 하는 방법 질문 드립니다
1
274
1
이거 h2 가 안나오고 스크롤도 안되는데 왜이래요?
1
257
1
모바일 버전에서 메뉴 클릭 후 그 위치로 이동할 때 상단 영역
1
508
2
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)4
2
233
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스)3
2
309
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태 (소스 js)2
2
261
1
PC에서 모바일화면으로 전환되면 GNB 메뉴가 OPEN되어있는 상태
2
423
1
포지션 속성 중복과 관련해서
1
215
1
section about에 관련.. 궁금해요
1
256
1
섹션3 모바일네이게이션 퍼블리싱 모바일트리거 관련
1
194
2
개발자도구
2
483
6
트리거메뉴 제이쿼리
3
434
2