베이직 테마의 'TOP(상단으로)' 버튼을 HTML 웹페이지에 출력하는 방법 채택완료
HanSeoulo
3년 전
조회 2,780
안녕하십니까? 이 Q&A 게시판에서 많은 도움을 받고 있는 이용자입니다.
아래 캡처 화면에 보이는, 베이직 테마의 'TOP(상단으로)' 버튼을 HTML로 만든 웹페이지에 사용할 수 있는지, 그리고 사용할 수 있다면 어떻게 해야 하는지 여쭙고자 합니다.
우선 해당 버튼과 관련된 정보는 아래와 같이 'default.css'에서 찾을 수 있었습니다.
문제는 이러한 정보를 HTML에 어떻게 반영하느냐인데요. 이에 대해서 전문가님들의 가르침을 청하고자 합니다.
읽어 주셔서 감사합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
3년 전
html css 는 모양과 위치를 잡는것이고
기능은 javascript 로 되어있을겁니다
해당 코드를 찾아서 복사하거나
구글에 top버튼 javascript 를 참고하세여
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
H
HanSeoulo
3년 전
감사합니다. 사진상의 버튼과 동일한 모양의 것으로 사용하고 싶었거든요. 일단 알려 주신 대로 해 보겠습니다.
댓글을 작성하려면 로그인이 필요합니다.
마르스컴퍼니
Expert
3년 전
<HTML> (tail.php)
</p>
<p><button type="button" id="top_btn">
<i class="fa fa-arrow-up" aria-hidden="true"></i><span class="sound_only">상단으로</span>
</button></p>
<p>
<CSS> (default.css)
</p>
<p>#top_btn {position:fixed;bottom:20px;right:20px;width:50px;height:50px;line-height:46px;border:2px solid #333;color:#333;text-align:center;font-size:15px;z-index:90;background:rgba(255,255,255,0.5)}
#top_btn:hover {border-color:#3059c7;background:#3059c7;color:#fff}</p>
<p>
<Javascript> (Jquery) (tail.php)
</p>
<p><script>
$(function() {
$("#top_btn").on("click", function() {
$("html, body").animate({scrollTop:0}, '500');
return false;
});
});
</script></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
H
HanSeoulo
3년 전
유용한 정보 감사합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인