返回顶部功能基本上各站都有,本站早期也贴过代码,这次主要是“去到底部”。

首先要引用jQuery库
<script src="//apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
下面是主要js代码,我已经进行了简单注释
$(function(){
    $("#updown").css("top",window.screen.availHeight/2-100+"px"); // 按钮距离顶部的位置
    $(window).scroll(function() { // 浏览器窗口滚动事件
        if($(window).scrollTop() >= 100){ // 当滚动距顶部>=100时
            $('#updown').fadeIn(300); // 元素显示
        }else{    
            $('#updown').fadeOut(300);    // 元素隐藏
        }  
    });
    $('#updown .up').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); // 至顶
    $('#updown .down').click(function(){$('html,body').animate({scrollTop: document.body.clientHeight+'px'}, 800);}); // 至底,取整个body的高度为至底部距离
});
相关CSS

用到的按钮使用的是外链图片,按个人喜好替换

#updown{_top:expression(eval((document.compatMode&&document.compatMode=="CSS1Compat")?documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-1:document.body.scrollTop+document.body.clientHeight-this.clientHeight-1));position:fixed;_position:absolute;top:200px;right:30px;display:none}
#updown span{cursor:pointer;width:48px;height:50px;display:block}
#updown .up{background:url(http://i3.tietuku.com/bcfdc8800c3effd9.png) no-repeat}
#updown .up:hover{background:url(http://i3.tietuku.com/bcfdc8800c3effd9.png) top right no-repeat}
#updown .down{background:url(http://i3.tietuku.com/bcfdc8800c3effd9.png) bottom left no-repeat}
#updown .down:hover{background:url(http://i3.tietuku.com/bcfdc8800c3effd9.png) bottom right no-repeat}

演示地址