스크롤 탑 버튼



스크롤이 일정 높이 이하로 내려가면 버튼이 나타나고 다시 올라가면 사라집니다.

버튼을 클릭하여 화면 상단으로 이동시 부드럽게 스르륵 올라갑니다.



압축을 풀어 js/ 디렉토리에 업로드 한 후 tail.php 에 아래 코드 삽입하면 됩니다.



<script type="text/javascript" src="<?=$g4[path]?>/js/mw.scroll.top.js"></script>



버튼이 사이트 외곽에 붙어있기를 원한다면

사이트 외곽을 <div id="container"> </div> 로 감싸주면 됩니다.



[code]





var mw_scroll_top =

{

    // 시작 위치

    start_line: 100,



    // 스크롤 속도

    scroll_duration: 500,



    // 하단 여백

    bottom_margin: 180,



    container: '#container',

    top_button: 'top-button',

    top_button_move: function() {

        $('body').animate({scrollTop:0}, mw_scroll_top.scroll_duration);

    },

    top_button_control: function() {

        if ($(window).scrollTop() > mw_scroll_top.start_line) {

            $('#'+mw_scroll_top.top_button).fadeIn('slow');

        } else {

            $('#'+mw_scroll_top.top_button).fadeOut('slow');

        }

        var t = $(window).scrollTop() + $(window).height() - $('#'+mw_scroll_top.top_button).outerHeight() - 10;

        var m = $(mw_scroll_top.container).width() ? $(mw_scroll_top.container).outerHeight() - mw_scroll_top.bottom_margin : t;

        if (t >= m) t = m;



        var l = $(mw_scroll_top.container).width() ? $(mw_scroll_top.container).offset().left + $(mw_scroll_top.container).outerWidth() + 10

              : $(window).width() - $('#'+mw_scroll_top.top_button).outerWidth() - 10;



        $('#'+mw_scroll_top.top_button).css('top', t).css('left', l);

    },

    run: function() {

        $(document).ready(function () {

            top_button = $('<div id="'+mw_scroll_top.top_button+'"><img src="'+g4_path+'/js/top.png"></div>')

                            .css('position','absolute')

                            .css('cursor', 'pointer')

                            .css('display', 'none')

                            .click(function () { mw_scroll_top.top_button_move() } )

                            .appendTo('body');

            $(window).bind('scroll resize', function (e) { mw_scroll_top.top_button_control() } );

        });

    }

}



mw_scroll_top.run();

[/code]

---

※ 로그인 하시면 원본파일을 볼 수 있습니다. ※