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 기본 사용법 다음처럼 문서 내에서 이동하는 링크를 가진 [...]
jQuery Smooth Scroll은 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>
<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
<!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>
비디오 플레이어
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.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. GitHub : https://github.com/ndabas/toc Download : http://ndabas.github.com/toc/assets/jquery.toc.zip 목차 클릭 시 부드럽게 이동하는 효과를 주고 싶다면 다른 [...]
jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. 목차 클릭 시 해당 위치로 부드럽게 이동(smooth scroll)하는 기능을 포함합니다. GitHub : https://github.com/jakobbossek/jquery.toc Download : [...]
컴퓨터 사양이 좋아지고 네트워크 속도가 빨라지면서, 홈페이지의 배경으로 동영상을 사용하는 곳이 많아지고 있습니다. 동영상을 배경으로 사용하는 방법은, 서버에 동영상을 올려놓고 video 태그로 넣는 방법과 유튜브에 업로드하고 불러오는 방법이 있습니다. 유튜브를 [...]
A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes.
Are You Looking To Hire a jQuery Programmer? **[HourlyDeveloper.io](https://hourlydeveloper.io/ "HourlyDeveloper.io")**, a leading jQuery application development company, can help you build interactive front-end solutions to leapfrog the digital...