-
728x90
원본 Url : http://www.xpressengine.com/?mid=download&package_srl=21842038
Test Url : http://www.uhoon.co.kr/test/1183.html
지정된 스크롤 위치 이하로 내려가게 되면
스크롤탑 컨트롤이 나타나서 클릭시 페이지 상단으로 올라갑니다..
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>scrolltop control </title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <style type="text/css"> h1 { font-size: 34px; line-height: 1.2; margin: 0.3em 0 10px; } #scrolltotop{position:fixed;bottom:0px;right:0px}#scrolltotop span{width:48px;height:48px;display:block;background:url("/test/1183/top.png") top no-repeat;margin:0px 15px 10px 0;border-radius:3px;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out;transition:all 0.2s ease-out}#scrolltotop a:hover span{background:url("/test/1183/top.png") bottom no-repeat} </style> <script type="text/javascript"> <!-- jQuery(function($){ $('#scrolltotop').hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#scrolltotop').fadeIn(); } else { $('#scrolltotop').fadeOut(); } }); $('#scrolltotop a').click(function () { $('body,html').animate({ scrollTop: 0 }, 1000); return false; }); }); }); //--> </script> </head> <body> <div id="scrolltotop" style="display: block;"><a href="#top"><span></span></a></div> <div style="height:3200px;">a</div> </body> </html>728x90댓글
꼰대 개발자의 블로그
꼰대가 흐름을 따라가고 싶어서 기록하는 블로그
