본문 바로가기
퍼블리싱/jQeury, Javascript

스크롤따라 흐르는 TOP버튼, 버튼클릭하면 페이지최상단으로 이동하기

ichbintaeeun 2014. 9. 30. 16:42

웹사이트에서 많이 쓰는 것을 정리해서 올려놈


jsfiddle 
http://jsfiddle.net/ichbintaeeun/ap4252uv/3/


HTML

<body>
   <div></div>
   <a href="#" class="go-to-top">TOP</a>
</body>


CSS

<style>
            * {
                margin:0;
                padding:0;
                font-size: 12px;
            }
            div {
                height:1500px;
                background: #000;
            }
            a.go-to-top{
                position:absolute;
                bottom:100px;
                right:100px;
                z-index:99;

                display: inline-block;
                width:30px;
                height:30px;
                border-radius: 15px;

                line-height:30px;
                text-align:center;
                text-decoration:none;

                background: #ccc;
                opacity: 0.7;
                color:#fff;
            }
</style>


jQuery

<script>
            $(document).ready(function(){   
                var oldPosition;    
                var easingStyle;
                var floatTarget = $("a.go-to-top");
                var floatSpeed = 1000;

                $(window).load(function(){
                    oldPosition = floatTarget.position().top;
                    floating();
                });

                $(window).scroll(function(){
                    floating();
                });

                function floating(){
                    var newPosition = oldPosition+$(document).scrollTop();
                    floatTarget.stop().animate({top:newPosition},floatSpeed);
                }

                floatTarget.click(function(){
                    $("html, body").animate({scrollTop:0},1000);
                    return false;
                });

            });
</script>





저작자표시

'퍼블리싱 > jQeury, Javascript' 카테고리의 다른 글

Customizabled scrollbars (jquery.nicescroll)  (0) 2014.11.28
IE 8, 9버전에서 placeholder 적용시키기  (0) 2014.11.11
툴팁 띄우기  (0) 2014.09.30
userAgent 식별하기  (0) 2014.09.29
브라우저체크  (0) 2014.07.30

'퍼블리싱/jQeury, Javascript' Related Articles

티스토리툴바