当你的一篇文章很长的时候，用户看完想返回顶部的时候看见那长长的滚动条……立马就刷新或关闭了页面，其实一个简单的JQuery的滚轮事件就可以帮助我们完成。

看、这是本站使用的返回顶部与底部，首先我们得让用户在刚进入这个页面的时候(也就是滚动条处于最顶部的时候)先让他display:none;不显示，当滚动条抵达一定距离的时候再让他显示出来。 如果只需要简单的返回顶部或底部，可以直接使用a标签链接锚来指向一个顶部id或底部id即可 这里我们来用jquery来实现动画移动 自己可以随意写2个div并使用position:fixed;将他固定在屏幕的右下方并设置display:none;属性

代码如下：

<!--html-->
<div class="div">
     <div class="div1">
          返回顶部
     </div>
     <div class="div2">
         移动到底部
     </div>
</div>
<!--css-->
<style>
        .div{
            display:none;//不显示
         }
        .div1{/*css代码自行调整*/
            border:1px solid #ccc;
            height:50px;
            width:50px;
            position:fixed;/*固定位置*/
            right:50px;/*移动到距离右边50px的位置*/
            bottom:100px;/*移动到距离底部100px的位置*/
            cursor:pointer;
        }
        .div2{
            border:1px solid #ccc;
            height:50px;
            width:50px;
            position:fixed;/*固定位置*/
            right:50px;/*同上*/
            bottom:50px;
            cursor:pointer;
        }
    </style>

首先将随意制作出来的这两个返回顶部与底部隐藏，之后来设置jq脚本， 请自备jquery类库或使用百度jquery类库

之后的jq代码很简单，只需要几个判断和滚轮函数即可。

<script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    //显示/隐藏
    var lift = 0;//首先定义lift为滚动条的位置，默认为0
    $(window).scroll(function(){//当滚轮滚动的时候
        lift = $(window).scrollTop();//将当前的滚动条位置赋值给lift
        if(lift>150){//判断当前滚动条处于150px的位置显示两个按钮，否则不显示
            $(".div").css({
                display:"block"
            });
        }else{
            $(".div").css({
                display:"none"
            })
        }
    });
    $(".div1").click(function(){//当返回顶部按钮被点击的时候
        $('html, body').animate({//将html以及body标签移动到滚动条处于0px的位置,使用慢速动画移动也可以设置数值
            scrollTop:0
        }, 'slow');
    });
    $(".div2").click(function(){//同样的返回底部被点击
        var docHeight = $("html").height();//将当前html文档高度获取，并赋值给docHeight
        $("html,body").animate({//同样的将html和body动画移动到刚才获取的docHeight的位置
            scrollTop:docHeight
        },'slow')
    });
</script>

就这样，一个简单的jq动画移动就完成，如果嫌麻烦的可以直接使用a标签的锚来指向……