상단으로 이동 버튼

상단으로 이동 버튼

홈페이지가 길어지면 상단으로 버튼을 만드는 것이 좋다.
스크롤에 따라 나타났다 사라졌다 하는 버튼을 만들어 본다.

<!--상단올라가기-->
<script type=text/javascript>
$(document).ready(function(){
    $(".return-top").hide(); // 탑 버튼 숨김
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) { // 스크롤 내릴 표시
                $('.return-top').fadeIn();
            } else {
                $('.return-top').fadeOut();
            }
        });
        $('.return-top').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);  // 탑 이동 스크롤 속도
            return false;
        });
    });
});
</script>
<a class="return-top" href="#"><img src="./img/topbtn.png"></a>
<style>
.return-top {right:10px; bottom:30px; position:fixed; z-index:9999; padding:5px 10px 10px 10px;}
.return-top img {width:45px;}	
</style>
<!--상단올라가기끝-->

중앙 정렬 홈페이지 일경우.

<div class="return-top"><a href="#"><img src="./img/topbtn.png"></a></div>
<style>
.return-top {left:50%;bottom:30px;position:fixed;z-index:9999;margin-left:530px;}
.return-top a {padding:5px 10px 10px 10px;}	
.return-top img {width:45px;}	
</style>