페이지 위로 올리는 버튼 만들기

참고 블로그 

[Tistory] 티스토리 TOP 버튼 생성하기

 

방법

준비물 : 괜찮은 크기의 위로 올라가는 것을 알릴 수 있는 사진

 

head 태그 안 이나 body 태그 위에 아래 코드 넣으면 된다.

나는 body 태그에서 안되길래 head 태그 아래에 뒀다.

  <!--TOP 버튼 Start-->
  <script type="text/javascript">
    $(function(){
        $("#topbtn").hide();
        $(window).scroll(function(){
            if($(this).scrollTop() > 100){$("#topbtn").fadeIn();}
            else{$("#topbtn").fadeOut();}
        });
    });
  </script>
  <a href="#" id="topbtn" style="display:none; position:fixed; bottom:20px; right:20px; z-index:9999;" title="Top"><img src="./images/angle-circle-up.png" border="0"/></a>
<!--TOP 버튼 End-->

 

추가로 css 에 스크롤 부드럽게 하는 것도 적어두셨는데, 지금 수정하면서 알았지만 나는 안넣었더라,.

/* 스크롤을 부드럽게*/
html {
    scroll-behavior: smooth;
}

 

사용 사진 - 사진은 16px 크기의 사진으로 다운 받았다.

앵글 서클 업 아이콘 UICONS Rounded Thin

 

필요한 사람이 있을 수 있으니 파일 첨부~

angle-circle-up.png

0.00MB