jQuery GoTop

☞ 基本設定

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>  

☞ 語法

GoTops 按鈕事件

<script type="text/javascript">
$(function() {
    /* 按下GoTop按鈕時的事件 */
    $('#gotop').click(function(){
        $('html,body').animate({ scrollTop: 0 }, 'slow');   /* 返回到最頂上 */
        return false;
    });
    
    /* 偵測卷軸滑動時，往下滑超過400px就讓GoTop按鈕出現 */
    $(window).scroll(function() {
        if ( $(this).scrollTop() > 400){
            $('#gotop').fadeIn();
        } else {
            $('#gotop').fadeOut();
        }
    });
});
</script>   

Scroll 浮動事件

// JavaScript Document
 
    $(function () {
        $("#1Eb").click(function () {
            $('html,body').animate({ scrollTop: $('#1E').offset().top }, 1000);
            return false;
        });
 
        $("#1Cb").click(function () {
            $('html,body').animate({ scrollTop: $('#1C').offset().top }, 1000);
            return false;
        });
 
        $("#2Eb").click(function () {
            $('html,body').animate({ scrollTop: $('#2E').offset().top }, 1000);
            return false;
        });
 
        $("#2Cb").click(function () {
            $('html,body').animate({ scrollTop: $('#2C').offset().top }, 1000);
            return false;
        });
 
        $("#3Eb").click(function () {
            $('html,body').animate({ scrollTop: $('#3E').offset().top }, 1000);
            return false;
        });
 
        $("#3Cb").click(function () {
            $('html,body').animate({ scrollTop: $('#3C').offset().top }, 1000);
            return false;
        });
    });
 
    $(function () {
        $("#gotop").click(function () {
            jQuery("html,body").animate({
                scrollTop: 0
            }, 1000);
        });
        $(window).scroll(function () {
            if ($(this).scrollTop() > 300) {
                $('#gotop').fadeIn("fast");
            } else {
                $('#gotop').stop().fadeOut("fast");
            }
        });
    });

☞ 顯示

<div id="gotop"></div>

<style>
     #gotop {
          display: none;
          background-repeat:no-repeat;
          background-image:url(../images/backTopBall.png);
          position: fixed;
          right: 50px;
          bottom: 60px;
          width: 60px;
          height: 60px;
          padding: 10px 15px;
          font-size: 26px;
          cursor: pointer;
          vertical-align: middle;
          font-weight: 900;
     }
</style>