제이쿼리 스크롤 상단 이동 버튼 (Scroll back to top)

제이쿼리를 이용한 간단한 스크롤 TOP 이동 버튼 입니다.
버튼 이미지는 우선 Font Awesome을 이용했습니다만 이미지 파일이나 css로 만들어서 사용하셔도 됩니다.

전체 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>Scroll back to top</title>
    <!-- font awesome  -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet">
    <style>
      .scrolltop {
        display: none;
        position: fixed;
        right: 30px;
        bottom: 50px;
        z-index: 1030;
        font-size: 1.875rem;
        color: #868e96;
        transition: all 0.5s ease-in-out;
        opacity: 0.8;
      }
      .scrolltop:hover,
      .scrolltop:focus {
        color: #dc3545;
        transition: all 0.5s ease-in-out;
      }
    </style>
  </head>
  <body>
    <div style="padding: 20px 20px 1500px 20px">
      <h2>The example "scroll back to top"</h2>
      <p>스크롤를 아래로 내리면 버튼이 나타 납니다.</p>
      <p>버튼을 클릭하면 상단으로 이동 됩니다.</p>
    </div>
    <a id="backToTop" class="scrolltop" href="#">
      <i class="fas fa-chevron-circle-up"></i>
    </a>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
      jQuery(document).ready(function () {
        $(window).scroll(function () {
          if ($(this).scrollTop() > 100) {
            $('#backToTop').fadeIn(500);
          } else {
            $('#backToTop').fadeOut('slow');
          }
        });
        $('#backToTop').click(function (e) {
          e.preventDefault();
          $('html, body').animate({scrollTop: 0}, 200);
        });
      });
    </script>
  </body>
</html>

제이쿼리 라이브러리 없는 순수 자바스크립트

 

맨 위로 가기 버튼 만들기, 자바스크립트 Scroll back to top

Back to top 또는 Scroll to top으로 불리는 위로 가기 버튼, 본문 내용이나 목록 페이지가 긴 경우 또는 무한 스크롤이 있는 페이지에서 마우스 스크롤 없이 버튼 클릭만으로 페이지 상단으로 이동하

wonderbout.tistory.com

반응형
Comment 0