그누보드 - 스크롤을 내리면 스무쓰하게 나타나는 TOP버튼

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

스크롤을 내리면 스무쓰하게 나타나는 TOP버튼 정보

스크롤을 내리면 스무쓰하게 나타나는 TOP버튼

본문

화면 상단에 있을때는 버튼이 나타나지 않고

마우스 스크롤로 내리면 스무쓰하게 나타나는 TOP버튼 jquery plugin방식

링크1 : 돼지코구뇽님 홈페이지입니다.( 몇몇 그누보드 사용자들은 다들 가지고 계시더라구요..)
링크2 : 원본소스 홈페이지입니다. (UItoTop jQuery Plugin - Matt Varone)

적용방법은
<head></head>안에 사용합니다.


<head>
<link rel="stylesheet" media="screen,projection" href="css/ui.totop.css" />
<!-- jquery -->  
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<!-- easing plugin ( optional ) -->
<script src="js/easing.js" type="text/javascript"></script>
<!-- UItoTop plugin -->
<script src="js/jquery.ui.totop.js" type="text/javascript"></script>
<!-- Starting the plugin -->
<script type="text/javascript">
        $(document).ready(function() {
            /*
            var defaults = {
                containerID: 'toTop', // fading element id
                containerHoverID: 'toTopHover', // fading element hover id
                scrollSpeed: 1200,
                easingType: 'linear'
            };
            */
             
            $().UItoTop({ easingType: 'easeOutQuart' });
             
        });
    </script>
</head>

Top버튼으로 사용할 이미지는 img와 ui.totop.css을 수정하여 사용하면됩니다.