jQuery / Plugin / jQuery Smooth Scroll

jQuery / Plugin / jQuery Smooth Scroll

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

jQuery Smooth Scroll은 HTML 내에서 링크를 클릭하여 이동할 때, 부드럽게 이동하도록 만들어주는 플러그인입니다.

기본 사용법

  • 다음처럼 문서 내에서 이동하는 링크를 가진 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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인

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 / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인 - 클릭 시 부드럽게 이동

jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. 목차 클릭 시 해당 위치로 부드럽게 이동(smooth scroll)하는 기능을 포함합니다. GitHub : https://github.com/jakobbossek/jquery.toc Download : [...]

jQuery / Plugin / jquery.mb.YTPlayer / 유튜브 영상을 배경으로 사용하게 해주는 플러그인

컴퓨터 사양이 좋아지고 네트워크 속도가 빨라지면서, 홈페이지의 배경으로 동영상을 사용하는 곳이 많아지고 있습니다. 동영상을 배경으로 사용하는 방법은, 서버에 동영상을 올려놓고 video 태그로 넣는 방법과 유튜브에 업로드하고 불러오는 방법이 있습니다. 유튜브를 [...]

jQuery Jcrop Plugin

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes.

Hire Dedicated Jquery Developer

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...