고정 헤더 영역
상세 컨텐츠
본문
반응형
페이지에서 맨위로 가는 TOP버튼을 만들었습니다.
스크롤에 따라다니는 배너, 메뉴 등 에서 보셨던 기능입니다.
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var topHeight = parseInt($("#floatingTop").css("top").substring(0,$("#floatingTop").css("top").indexOf("px")));
$(window).scroll(function () {
offset = topHeight+$(document).scrollTop()+"px";
$("#floatingTop").animate({top:offset},{duration:500,queue:false});
});
});
</script>
<style>
#floatingTop{
position:absolute;
width:40px;
top:150px;
right:500px;
padding:0;
margin:0;
z-index:1000;
}
</style>
</head>
<body>
<div id="floatingTop">
<a href="#top"><img src="https://www.gstatic.com/webp/gallery/1.sm.jpg"></a>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
반응형
'JavaScript & HTML' 카테고리의 다른 글
| jquery 부모, 자식 노드 찾기 (0) | 2015.04.03 |
|---|---|
| javascript prototype (0) | 2015.04.02 |
| jquery href 함수호출 (함수 선언) (0) | 2015.03.11 |
| 라디오, 체크박스 값 가져오기 (0) | 2015.03.05 |
| jquery blur, setTimeout (시간 후 함수실행) (0) | 2015.02.11 |
댓글 영역