상하 스크롤 버튼 만들기 : kuzuro

블로그 또는 사이트의 내용이 길어져서 상하로 스크롤이 생기는 경우 마우스로 스크롤바를 직접 이동시키거나, 마우스의 휠을 원하는 위치까지 돌리거나, 키보드의 Home, End, Page Up, Page Down 키를 눌러서 이동합니다.

키보드를 누르려면 마우스를 잡은 손을 떼거나 혹은 다른 손으로 키보드를 눌러야하며, 마우스 휠은 갑갑하고, 스크롤바를 직접 이동시키는건 그나마 낫지만 얇은 스크롤 막대를 누르고 움직이는건 종종 불편할뿐더러 종종 스크롤바가 아닌 다른 영역을 클릭했을 때 갑자기 이동되는 경우도 있습니다.

그리고 키보드와 마우스가 없는 스마트폰이나 태블릿등의 기기에서는 열심히 손가락으로 화면을 이동해야합니다.

필수는 아니지만, 이런 이유로 상하 스크롤 기능이 필요합니다.

제 블로그의 우측 하단에도 그러한 기능의 버튼이 있습니다. 최하단으로 이동할 수 있으며, 화면이 아래로 내려가면 다시 올라갈 수 있도록 최상단으로 이동할 수 있는 버튼이 생깁니다.

자바스크립트 라이브러리인 제이쿼리(JQuery)로 간단하게 이 기능을 구현할 수 있습니다. 물론 자바스크립트만으로도 구현할 수 있습니다.

<!doctype html>
<html>
<head>
<title>스크롤 버튼</title>
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
</head>
<body>

<h1>스크롤 버튼 만들기</h1>

<p>맨 위</p>

<div style="height:20000px;">
    <!-- 빈 내용 -->      
</div>

<div style="position:fixed; top:200px; left:50px;">
    <button type="button" class="upBtn">맨 위로</button><br /><br />
    <button type="button" class="downBtn">맨 아래로</button>  
    <button type="button" class="downBtn2">맨 아래로(특정 요소)</button>
  
    <script>
    $(".upBtn").click(function(){
        $('html, body').animate({scrollTop:0}, 200);
    });

    $(".downBtn").click(function(){
        $('html, body').animate({scrollTop:($('body').height())}, 200);
    });  
      
    $(".downBtn2").click(function(){
        $('html, body').animate({scrollTop:($(".bottom").offset().top)}, 200);
    });
    </script>
  
</div>

<p>맨 아래</p>
<div class="bottom"></div>

</body>
</html>

이 HTML파일은 몇개의 문자와 버튼으로 구성되어있습니다.

'맨 위로' 버튼을 클릭하면 최상단으로 이동하고, '맨 아래로' 버튼을 클릭하면 최하단으로 이동합니다. 마지막으로 '맨 아래로(특정요소)' 버튼을 클릭하면 임의로 지정한 특정 요소가 있는 화면으로 스크롤됩니다. 여기선 그 특정요소가 최하단에 위치해있기 때문에 최하단으로 이동됩니다.

3개의 버튼이 동작되는 코드는 거의 동일하게 되어있습니다.

$([스크롤 되는 요소]).animate({scrollTop:[스크롤되는 위치]}, [스크롤 속도]);

[스크롤 되는 요소]에는 html, body를 선택하여 현재 화면이 스크롤할 수 있도록 합니다.

[스크롤 되는 위치]에서 0은 시작값 즉 최상단이며, $('body').height()는 body의 높이만큼 즉 최하단, $(".bottom").offset().top는 클래스 bottom의 위치입니다. 만약 클래스 bottom이 최상단이나 중간에 있었다면 그쪽으로 이동했을겁니다.

[스크롤 속도]는 0에 가까울수록 빨리 이동되며, 0인 경우 즉시 이동합니다. 1000은 1초에 해당되며, 그 시간에 맞게 화면이 자동으로 스크롤되며 이동됩니다. 숫자는 작아도 상관없지만 너무 큰 숫자를 입력하면 느리게 이동하니 적당한 값을 주는게 좋습니다.