css소스

.top { position: fixed; bottom:20px; right:30px; background: url(http://cdn1.iconfinder.com/data/icons/oxygen/48x48/actions/go-up.png) no-repeat; width:48px; height:48px; }

jQuery 소스

$(document).ready(function(){
    var $body = $(document.body), //자주 사용하기에 캐시되게 변수에 넣어준다
        $top = '';

    $top=$('
') //div 를 만들고 
            .addClass('top') //top className을 주고
            .hide() //처음에는 숨겨둔다
            .click(function(){  // 클릭이 이벤트 할당
                $body.animate({ scrollTop: 0 }); //animation효과로 scollTop=0으로 이동
            })
            .appendTo($body); // body에 top을 넣는다

    //윈도우의 스크롤위치로 위로가기 버튼을 보여줘야기에 핸들러 작성
    $(window).scroll(function(){
        var y = $(this).scrollTop();
        if(y >= 100){
            $top.fadeIn();
        } else { 
            $top.fadeOut();
        }
    });
});

html 소스 (id=header)

<div id="header">
Scroll Fix Header like Facebook in JQuery
</div>

jQuery 소스

$(document).ready(function() {
 
    var div = $('#header');
    var start = $(div).offset().top;
 
    $.event.add(window, "scroll", function() {
        var p = $(window).scrollTop();
        $(div).css('position',((p)>start) ? 'fixed' : 'static');
        $(div).css('top',((p)>start) ? '0px' : '');
    });
 
});

html 소스

<a class="to_gnb" href="#gnb">메인메뉴 바로가기 링크</a>

css 소스

/* skip navigation */
.to_gnb {position:absolute; z-index:100; width:980px; left:50%; margin-left:-490px; top:-100px; padding:10px 0; text-align:center; background:#fafafa}
.to_gnb:hover,
.to_gnb:active,
.to_gnb:focus {top:0}