jQuery-緩慢回到頂部

HTML

<div class="div1">段落1</div>
 
<div class="div2">段落2</div>

<div class="div3">段落3</div>

<div class="div4">段落4</div>

<div class="div5">段落5</div>

<div class="div6">段落6</div>

<div class="div7">段落7</div>

<div class="returnTop_scroll">
    <p>TOP</p>
</div>

CSS

* {
    margin:0px;
    padding:0px;
    font-family:'微軟雅黑';
}
div {
    height:400px;
    border:10px solid lightgray;
    width:600px;
    margin: auto;
    font-size: 3em;
}

.returnTop_scroll{
    position: fixed;
    bottom: 50px;
    right: 30px;
    width: 70px;
    height: 70px;
    background:#ddd;
    text-align: center;
    font-size: 2em;
    cursor: pointer;
    display: none;
}

jQuery

$(function(){
   $(window).scroll(function () {
        if ($(this).scrollTop() > 300) {
         	$(".returnTop_scroll").fadeIn();
        } else {
         	$(".returnTop_scroll").fadeOut();
        }
    });
    $(".returnTop_scroll").click(function () {
        if ($(window).scrollTop() > 0) {
         	$("html,body").stop().animate({ scrollTop: 0 }, 1000);
        }
    });
})