实用编程参考01（前端）

实现点击按钮后页面变化功能

效果：点击一按钮页面置顶，点击另一按钮页面置底

参考代码如下所示

页脚定位相关代码：

<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;
		}