[CSS+Javascript] 간단한 Back to top 버튼 넣기

티스토리 / 웹페이지에 간단한 Back to top 버튼 넣기

Insert 'Back to top' button on your tistory blog or webpage

  이번 포스팅에서 소개할 것은 어느정도 페이지가 내려가면 나타나는 Back to top 버튼입니다. 버튼을 누르면 페이지 최상단으로 이동하구요. jQuery + Fontawesome을 사용하고 계시면 페이지에 바로 적용 가능하시고, Fontawesome을 사용하지 않으신다면 대체 이미지를 넣으시면 됩니다.

  In this posting, I introduce the Back to top button showing up when you scroll down the document. One click can drive you to the top. If you already use jQuery and Fontawesome, it can be quickly added in your page. If not, you can use the alternate image.

CSS

	
#toTop
{
        z-index:1030;
	width: 100px;
	border: 2px solid #f7f7f7;
	background: #f7f7f7;
	text-align: center;
	position: fixed;
	bottom: 10px;
	right: 10px;
	cursor: pointer;
	display: none;
	color: #333;
	opacity: 0.6;
	filter: alpha(opacity=60);
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-o-border-radius: 30px;
	border-radius: 20px;
	-webkit-transition: all .25s linear;
	-moz-transition: all .25s linear;
	-o-transition: all .25s linear;
	transition: all .25s linear;
	padding: 5px;
}
#toTop:hover
{
	background: #b3b3b3;
	border: 2px solid #b3b3b3;
} 
	

Javascript

	
<!-- scroll top -->
<script>
$(document).ready(function(){
	 $('body').append('<div id="toTop"><i class="fa fa-angle-double-up fa-5x"></i></div>');
         $("#toTop").bind("click", function () {$("body").animate({ scrollTop: 0 }, 200);});
		$(window).scroll(function () {
			if ($(this).scrollTop() != 0) {
				$('#toTop').fadeIn();
			} else {
				$('#toTop').fadeOut();
			}
		});   
});    
</script> 
	

  자바스크립트는 문서 뒷부분에 넣는게 페이지 로딩에 좋습니다. </body>전에 넣으세요.

  동작원리는 페이지가 로딩되면 페이지에 Back to top이 삽입되게 하는 것이며 이 버튼을 누를 시 jQuery의 animate 메소드를 사용하여 페이지의 상단부분을 보여주게 하는 것입니다. 부가적으로 이미 맨 위를 보고 있는 상황에서는 출력되지 않는 코드도 들어있구요.

  It is rather faster to insert javascript in bottom of the page. Please insert the code right before the </body> tag.

  Its priciple is here: 1. If the page just has been loaded, insert the Back to top button. 2. If the button is clicked, the 'animate' method of jQuery is called and It drives you to the top. In addition, if you are already looking at the top, the button won't be printed.

 아무튼 도움이 되었으면 좋겠습니다.

 I wish this posting will be helpful.