實現點選按鈕後頁面變化功能

效果：點選一按鈕頁面置頂，點選另一按鈕頁面置底

參考程式碼如下所示

頁尾定位相關程式碼：

<div class="bodyfooter">
     <div class="bottom" id="divFoot">
            此處可以寫頁尾底部文字
     </div>
</div>

主體按鈕相關程式碼；

<div class="scrollIcon">
    <button id="scrollTop">
        置頂按鈕
    </button>
    <button id="scrollDown">
        置底按鈕
    </button>
</div>
 

核心JS邏輯程式碼:

$(document).ready(function(){
    //頁面滾動到頂部
    $('#scrollTop').click(function(){
        $('body,html').animate({
            scrollTop:'0px'
        },400);
    });
    //頁面滾動到底部
    $('#scrollDown').click(function(){
        $('body,html').animate({
            scrollTop:$('#divFoot').offset().top
        },400);
    });
    //當滾到頂部時，向上按鈕消失；當滾到底部時，向下按鈕消失
    $(window).scroll(function(){
       if ($(document).height() == $(window).scrollTop() + $(window).height()) {
           $('#scrollDown').hide()
       } else {
           $('#scrollDown').show()
       }
        if ($(document).scrollTop() == 0) {
            $('#scrollTop').hide()
        } else {
            $('#scrollTop').show()
        }
    })
});
 

按鈕CSS渲染程式碼：

（於頁面上右側顯示）

		.scrollIcon{
            font-size:15px;
            display:block;
            cursor:pointer;
		}
		#scrollTop{
            position:fixed; 
            right: 2%; 
            bottom: 80px;
            line-height:22px;
            padding:0 2px;
            border:1px solid #ccc;      
		}
		#scrollDown{
            position:fixed; 
            right: 2%; 
            top: 100px;
            line-height:22px;
            padding:0 2px;
            border:1px solid #ccc;
		}