인프런 커뮤니티 질문&답변
작성한 질문수
화면을 부드럽게 이동하는 scrollTo 제이쿼리에 대해서
작성
·
1.4K
1
코딩웍스 선생님 강의에서, 특정 버튼 클릭시 지정된 섹션으로 화면을 부드럽게 이동시켜주는 제이쿼리 플러그인으로 jquery.scrollTo.min.js라는 js 파일을 올려주시고 연결(<script src...>)시키는법을 알려주셨는데요.
그 후 적용해보는 강의 파트에서, 선택자에 명령어를 입력할때,
이렇게 써주시면서 ,
"이건 플러그인 제작자가 정한 공식이니 따라치면 된다." 라고만 설명하고 넘어가셨습니다.
여기서 $.scrollTo(this.hash || 0, 900)이 공식을 어디서 찾아낸 것인지 알고 싶은데 어떻게 찾아야 할까요?
욕심으로는 이것저것 다 물어보고싶긴 합니다만...
- $뒤에 선택자가 없는 이유
- hash 는 무엇인지
- || 0, 900 는 무엇인지
...
뿐만 아니라 다른 제이쿼리 플러그인들도 각각의 공식이 있을 것 같은데, 그걸 어떻게 찾아서 써야 하는 것일지 모르겠습니다!
답변 3
1
제가 우연히 해당 질문을 보고 부족한 지식이지만, 짧게나마 답변을 드려봅니다.
1.$뒤에 선택자가 없는 이유 : 자바스크립트 및 제이쿼리를 학습하시다보면 DOM이라는 객체구조모델을 학습하시게될텐데, 지금 사용중인 scroll 이벤트의 경우, 객체구조의 최상단인 window가 주체가 되는 모델입니다. 이러한 경우, window는 생략이 가능하기에 원래 원칙적으로는 $window.scrollTo가 되어야 하나, 그냥 $.scrollTo를 표기한 것으로 판단됩니다.
2.hash 는 무엇인지 : 인스타그램 이라는 앱을 사용하시다보면, 해시태그라는 단어 한 번 이상 들어보셨으리라 생각이 듭니다. 그때 우리가 해시태그라고 표현하는 게 뭐였죠? 바로 이 #이라는 문자죠! 보통 웹문서에서 id선택자를 CSS에서 불러올 때, 선택자 앞에 #을 넣는데, 그때 정식 명칭이 이 hash 입니다. 그래서 우리가 #을 해시태그라고 하죠 (*해시태그 = hashtag) 상단 내비게이션 바를 클릭했을 때, 원하는 화면으로 자연스럽게 흘러가게 하기위해서 this.hash 라는 구문을 작성한것입니다. 여기에서 this가 가르키는 객체는 당연히 선택자를 가르키구요.
3.|| 0, 900 는 무엇인지 : 제이쿼리에서 윈도우 스크롤 이동 이벤트를 진행할 때, 보통 최상단으로 이동시키는 명령어가 $.scrollTop(0)으로 사용하는 것으로 알고 있습니다. 쉽게 말하면 $.scrollTo(0)은 현재 보고 있는 화면의 최상단을 의미하는 것이겠죠. 그이야기인즉 아무런 행동을 하지 않겠다는 뜻입니다. 다시 본론으로 돌아와서 설명해드리자면, $.scrollTo(this.hash || 0, 1500) 이 문장은 $.scrollTo(true || false, time)을 의미하는 것으로서, 스크롤이벤트를 진행하는데 있어서 html 본문에 선택자의 해시가 설정된게 있다면(*true)라면 true값을 따라 가라는 뜻이고, || (*or의 개념입니다.) 그렇지 않다면, 쉽게 말하면 현재 걸려있는 id선택자가 없다면, false값을 따라 가라, 즉 내비게이션이 위치한 최상단에 머물러 있어라 그 뜻입니다.
끝으로 마지막에 위치한 900이라는 숫자는 자바스크립트 및 제이쿼리에서 사용하는 숫자의 단위가 밀리초로서 1초 = 1000msc를 의미합니다. 여기에서 900을 넣었다는 건, 0.9초를 의미하는 거겠죠. 쉽게 말하면 숫자가 작아질수록 더 빠르게 해당 페이지로 이동을 한다는 뜻입니다.
저 역시 코딩웍스 선생님의 강의를 열강하는 사람으로서 우연히 보다가 답변 남겨드려봅니다. 코딩웍스 선생님 항상 응원합니다. 감사합니다.
1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.3/jquery.scrollTo.min.js"></script>
<style>
/*
아래처럼 CSS만 넣어주면 별도의 스크립트나 제이쿼리 플러그인 없이 같은 효과를 얻습니다.
html {
scroll-behavior: smooth;
}
*/
a {
background-color: red;
position: fixed;
right: 20px;
bottom: 20px;
padding: 10px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
}
</style>
</head>
<body>
<img src="http://placehold.it/600x1200" alt="">
<a href="#">top</a>
<script>
$('a').click(function(e) {
// e.preventDefault()는 클릭한 함수의 매개변수 e를 아래 예시처럼 a태그가 가지고 있는 href속성 내부의 # 내용을 주소표시줄에 안보이게 하기(a태그의 기본 이벤트 전달을 막음);
// 예시) http://127.0.0.1:2627/index.html#
e.preventDefault();
$.scrollTo(0, 900); // 아래의 this.hash 없이 사용하세요.
// this는 클릭한 자신 곧, a을 의미하고 hash는 href속성의 값을 찾을 수있는 속성
// $.scrollTo(this.hash || 0, 900);
});
</script>
<!-- Github 주소 : https://github.com/flesler/jquery.scrollTo -->
</body>
</html>
1
이렇게 구체적으로 질문하신 분은 처음이라 겸사 겸사 저도 찾아봤습니다.
$.scrollTo(this.hash || 0, 900);
이건 예전에 jquery.scrollTo.min.js 제이쿼리 라이브러리 공식 깃허브에서 쉽게 사용하는 방식으로 제공했던 스크립트인데 지금 들어가 보니 사용법이 많이 변경되었네요. 들어가서 어떻게 바뀐 것이고 사용법이 어떻게 되지라고 봤는데 꽤 어렵게 되어 있네요. 당장은 현재 깃허브에 있는 사용법으로 말씀드리기는 어렵네요.
$.scrollTo(this.hash || 0, 900); 이 부분은 query.scrollTo.min.js 제작자의 방식이라 제가 설명드리기는 어렵지만 그래도 제가 최대한 설명드릴 수 있는 방식으로 아래 답글에 html 소스 코드를 올렸으니까 참고해주세요. 아래 소스코드 전체를 에디터에 붙여넣기 해서 테스트해보세요.
주로 스크롤링은 CSS 속성으로 하다보니까 너무 올드한 제이쿼리 플러그인 내용이었네요. 명쾌하게 답을 드리고 싶었는데 그렇지 못해서 아쉽네요...
감사합니다!
주석달아놓으신 깃허브 주소 들어갔는데 봐도 도통 모르겠네요 ...ㅠㅠ
우선 강의에서 코딩하신 $.scrollTo(this.hash || 0, 900); 부분은 요즘 버전에서는 다른 방법으로쓰고있다는 것이죠?
깃허브 내용에서
$.extend($.scrollTo.defaults, {
axis: 'y', duration: 800
});
이게 현재 쓰이는 공식이라는걸까요?
제가 플러그인 사용법을 이해 못해서 못쓰는 경우는 없는데... 이건 도저히 어쩌라는건지 모르겠네요.
해당 강의에 더보기에 스크롤 관련 보강 내용 있으니 참고해주시구요.
더 나은 플러그인을 찾기 전까지는 CSS 방식으로 상용하세요.
html {
scroll-behavior: smooth;
}
아니면 제이쿼리 플러그인 방식으로 스크립트는 아래 내용으로 사용해주세요.
<script>
/* Smooth Scrolling */
$('.menu a').click(function(e) {
e.preventDefault();
$.scrollTo(0, 900);
});
</script>
Json님 좋은 팁 감사드립니다~!!