[CSS] - 맨위로 버튼 만들고 Jquery 효과 주기
CSS2018. 10. 25. 14:23
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
○ 맨위로 버튼 만들고 Jquery 효과 주기 |
@media 를 이용하여 반응형 페이지를 만들 때, 게시물이 길어져 스크롤바가 쭈욱 내려가게 된다 이럴 때 사용자 편의성을 위해서 일정부분 내려가면 맨위로 가는 버튼이 나와 맨위로 갈 수 있게 만들어보자 // html 1. awesome font를 사용하기 위해서 <head>에 링크를 추가하기 <!-- 맨위로 화살표 아이콘 사용하기 위해 --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"> 2. 맨위로 버튼 위치 설정하기 <!-- 클릭 시 맨위로 보내는 아이콘 부분 반응형에서만 나타나게 설정해주자 pc 화면에서 display:none; 해서 가리면 된다 --> <!-- bottom:20px, right:20px, position:fixed 를 줘서 오른쪽 하단에서 20px만큼 오른쪽 20px만큼 띄워주는 것이다 --> <a style="display:scroll; position:fixed; bottom:20px; right:20px; font-size: 40px;" href="#" class="gototop"><i class="fas fa-arrow-alt-circle-up"></i></a> 3. Jquery를 이용하여 맨위로 가는 부드러운 효과를 설정해주자 <!-- 스크롤하여 밑으로 어느정도 내려갔을대 사라지고 나타나는 효과 --> <!-- this.scrollTop 로 스크롤바 위치를 가져와서 400보다 크면 나타나게 아니면 사라지게 맨위로 버튼에 효과를 준다 --> <script> $(window).scroll(function() { if ($(this).scrollTop() > 400) { $('.gototop').fadeIn(); } else { $('.gototop').fadeOut(); } }); </script> <!-- 맨위로 버튼을 눌렀을 때, html body 쪽으로(맨위로) 스르르 올라가도록 애니메이션 효과를 준다 --> <script> $('.gototop').click(function() { $('html, body').animate({ scrollTop: 0 }, 400); return false; }); </script> |
'CSS' 카테고리의 다른 글
| [CSS] - IE 사용 시, input text 출력 부분이 짤려서 출력될 때 (0) | 2019.10.11 |
|---|---|
| [CSS] - 범위이탈(overflow) - 스크롤바 처리 (0) | 2019.10.10 |
| [CSS] - relative absolute 이용하여 이미지 가운데에 타이틀 띄우기 (0) | 2018.10.21 |
| [CSS] - z-index 이용하여 창 맨위로 띄우기 (0) | 2018.10.20 |
| [CSS] - owlcarousel 이용한 다중 캐러셀에서 a href 안될 때 해결법 (0) | 2018.09.29 |
댓글()