Bootstrap 5)를 쓴다면; 부트스트랩 자체 설정에 의한 부드러운 스크롤 애니메이션이 기본적으로 적용되어 있지만, 더 필요하다면; 문서 내부에서 점프하는 앵커에 플러그인을 써서 좀 더 부드럽고 가시적인 스크롤 애니메이션 효과를 나타낼 수도 있습니다..

아래로 내려가려면 클릭하세요..

1. Smooth Scroll 플러그인은 문서 내부에서 점프하는 앵커에 부드러운 애니메이션 효과를 주는데, 이를 사용하기 위해서는; 먼저, CDN 링크 및 초기화 스크립트를 넣어주어야 한다: 

            
                <body>
                    <p id="smooth-header">
                        <a href="#smooth-footer" data-scroll>아래로 내려가려면 클릭하세요..</a>
                    </p>

                    .. 중략

                    <p id="smooth-footer">
                        <a href="#smooth-header" data-scroll>위로 올라가려면 클릭하세요..</a>
                    </p>

                    ..
                    <!-- Smooth Scroll CDN 링크 및 초기화 -->
                    <script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15/dist/smooth-scroll.polyfills.min.js"></script>
                    <script> // Smooth Scroll 초기화
                        var scroll= new SmoothScroll('a[href*="#"]', { // 모든 앵커 링크에 스무드스크롤을 적용한다
                            /* 추가 옵션 설정 */
                            speed: 300ms, // 스크롤 속도(= 1000px 이동에 걸리는 시간) ← 기본값: 300ms
                            easing: 'linear' // Eeasing 애니메이션 종류 ← 기본값: linear
                        });
                    </script>
                </body>

☞ CDN 링크 및 초기화 스크립트는 </body> 코드 직전에 넣어주십시오 ← 앞으로 만나게 될 여타 플러그인들도 또한 마찬가지입니다

2. 사용법은 아주 간단한데, 그저 일반 앵커 링크에 data-scroll 속성을 추가해주는 것만으로 충분하다! 

            
                <body>
                    <p id="smooth-header">
                        <a href="#smooth-footer" data-scroll>아래로 내려가려면 클릭하세요..</a>
                    </p>

                    .. 중략

                    <p id="smooth-footer">
                        <a href="#smooth-header" data-scroll>위로 올라가려면 클릭하세요..</a>
                    </p>

                    ..
                    <!-- Smooth Scroll CDN 링크 및 초기화 -->
                    <script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15/dist/smooth-scroll.polyfills.min.js"></script>
                    <script> // Smooth Scroll 초기화
                        var scroll= new SmoothScroll('a[href*="#"]', { // 모든 앵커 링크에 스무드스크롤을 적용한다
                            /* 추가 옵션 설정 */
                            speed: 300ms, // 스크롤 속도(= 1000px 이동에 걸리는 시간) ← 기본값: 300ms
                            easing: 'linear' // Eeasing 애니메이션 종류 ← 기본값: linear
                        });
                    </script>
                </body>

☞ 위 코드의 <p> 태그 안에 있는 <a> 태그에 data-scroll 속성이 설정되어 있습니다!