--> -->

JQuery

 

 

html

<div style="margin-bottom:2000px;">
빈 공백
</div>
<a id="topBtn" href="#">TOP</a>

 

 

css

@font-face { font-family: 'TTTogether'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/TTTogetherA.woff') format('woff'); font-weight: normal; font-style: normal; }

a#topBtn {
	text-decoration: none;
	position: fixed;
	bottom: 120px;
	right: 40px;
	width: 60px;
	height: 60px;
	color: #4f8397;
	box-shadow: 0 0 15px #4f839750;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	text-align: center;
	line-height: 58px !important;
	font: normal 16px "TTTogether";		
	text-transform: lowercase;
	z-index: 9999; /* 포지션을 먼저 지정후 z-좌표(레이어) : 9999입니다. */ 
	-webkit-transition: all .8s;
	-moz-transition: all .8s;
	-o-transition: all .8s;
	transition: all .8s;
}


a#topBtn:hover {
	color: #fff;
	background: rgba(79, 131, 151, .7);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}

 

 

js

$(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 250) {
      $('#topBtn').fadeIn();
    } else {
      $('#topBtn').fadeOut();
    }
  });

  $("#topBtn").click(function() {
    $('html, body').animate({
      scrollTop : 0
    }, 400);
    return false;
  });
});

 

 

 

 

 

 

 

 

 

 

 

 

about author

PHRASE

Level 60  라이트

토끼 줄 잡으려다가 하나도 못 잡는다 , 여러 가지를 욕심내다가는 한 가지도 이루지 못한다는 말.

댓글 ( 0)

댓글 남기기

작성