jQuery Smooth Scroll
jQuery Smooth Scroll은 HTML 내에서 링크를 클릭하여 이동할 때, 부드럽게 이동하도록 만들어주는 플러그인입니다.
- GitHub : https://github.com/kswedberg/jquery-smooth-scroll
- Download : https://github.com/kswedberg/jquery-smooth-scroll/archive/master.zip
기본 사용법
- 다음처럼 문서 내에서 이동하는 링크를 가진 HTML 문서를 만듭니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
body { font-family: Consolas, sans-serif; }
a { color: blue; }
p { margin-bottom: 800px; }
</style>
</head>
<body>
<ul>
<li><a href="#ipsum">Ipsum</a></li>
<li><a href="#dolor">Dolor</a></li>
</ul>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
<h1 id="ipsum">Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
<h1 id="dolor">Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
</body>
</html>
- HTML 문서에 다음 코드를 추가합니다. 보통 위 또는 위에 넣습니다.
- jquery.smooth-scroll.js의 경로는 적절히 수정하세요.
<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/jquery.smooth-scroll.js"></script>
<script>
$( document ).ready( function() {
$( 'a' ).smoothScroll();
} );
</script>
- 이제 링크를 클릭하면 스르륵 그 위치로 이동합니다.
비디오 플레이어
00:00
00:08
특정 링크에만 적용시키는 방법
- 특정 링크에만 적용시키고 싶다면 선택자를 이용하세요. 다음은 ul 태그 안에 있는 링크에 대해서만 Smooth Scroll을 적용하는 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
body { font-family: Consolas, sans-serif; }
a { color: blue; }
p { margin-bottom: 800px; }
</style>
<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/jquery.smooth-scroll.js"></script>
<script>
$( document ).ready( function() {
$( 'ul a' ).smoothScroll();
} );
</script>
</head>
<body>
<ul>
<li><a href="#ipsum">Ipsum</a></li>
</ul>
<a href="#dolor">Dolor</a>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
<h1 id="ipsum">Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
<h1 id="dolor">Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
</body>
</html>
- Ipsum을 클릭하면 부드럽게 이동하지만, Dolor를 클릭하면 바로 이동합니다.
비디오 플레이어
00:00
00:07
옵션
jQuery Smooth Scroll에는 여러 가지 옵션이 있습니다. 이동 속도를 조절하거나, 이동 방식을 변경하거나, 이동 전 또는 이동 후에 어떤 작업을 수행할 수 있습니다.
다음은 이동 위치를 조정하는 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
body { font-family: Consolas, sans-serif; }
a { color: blue; }
p { margin-bottom: 800px; }
</style>
<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/jquery.smooth-scroll.js"></script>
<script>
$( document ).ready( function() {
$( 'ul a' ).smoothScroll( {
offset: -100
} );
} );
</script>
</head>
<body>
<ul>
<li><a href="#ipsum">Ipsum</a></li>
<li><a href="#dolor">Dolor</a></li>
</ul>
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
<h1 id="ipsum">Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
<h1 id="dolor">Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non ipsum massa. Pellentesque vel dapibus elit. Fusce at rhoncus nisl, sit amet facilisis ante. Morbi vestibulum diam ac congue maximus. Nullam quis risus auctor, congue leo quis, pellentesque diam. Morbi scelerisque, odio quis egestas tincidunt, tellus nunc auctor mi, pellentesque sagittis erat felis quis dolor. Integer sit amet velit quis leo placerat imperdiet. Pellentesque tempus nulla nec porttitor rhoncus.</p>
</body>
</html>
비디오 플레이어
#jquery #plugin #jquery smooth #codingfactory
1.60 GEEK