웹팁 a태그 또는 jqeury를 이용하여 '위로 가기' 버튼 만들기
이윰
178 1 0
# a태그와 인라인 스타일로 '위로 가기' 버튼 만들기
<!--원하는 위치에 버튼 넣기-->
<a href="#" style="display:scroll; position: fixed; rigit: 20px; bottom: 20px; title=top>위로</a>
# jqeury로 스크롤을 어느 정도 내렸을때 '위로 가기' 버튼이 나오게 만들기
<!--원하는 위치에 버튼 넣기--> <button type="button" name="button" class="bt_top">위로</button>
$(window).scroll(function () { var quickScroll=$(document).scrollTop(); if (600 <= quickScroll ) { $('.bt_top').css('display','block'); }else { $('.bt_top').css('display','none'); } }); $('.bt_top').click(function(){ $('html, body').animate({ scrollTop: '0' }, 800); });
스크롤 높이가 600이상이 되면 위로 가기 버튼이 나타납니다.
# 버튼 위치와 스타일
텍스트 '위로'라고 쓰여진 부분을 이미지나 fontawesome 아이콘 등으로 교체하고 스타일을 꾸밉니다.
/* ----- css ----- */ .bt_top { display: none; position: fixed; right: 20px; bottom: 20px; width: 40px; height: 40px; z-index:99; }