javascript - 动画滚动顶部事件不起作用

Question

我正在尝试为动作设置动画scrolltop，但是当我单击返回顶部按钮时，它会在没有动画的情况下快速返回顶部，这可能是 CSS 参数错误吗？

这是脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script type="text/javascript"></script>
<script>
    $(window).scroll(function () {
        if($(this).scrollTop() > 990) {
            $('.scrollup').fadeIn(600)
        } else {
            $('.scrollup').fadeOut(300)
        }
    });
    $('.scrollup').click(function () {
        $('html, body').animate({
            scrollTop: 0
        }, 600);
        return false;
    });
</script>

<div id="toparrow">
    <a href="#" class="scrollup">Scroll</a>
</div>

和 CSS 元素：

#toparrow {

}
.scrollup {
    width:72px;
    height:45px;
    top:240px;
    left:927px;
    position:absolute;
    background: url('../img/generic/toparrow.png') bottom;
    display:none;
    text-indent:-9999px;
}

和网站：http ://www.citrontech.com/services

Answer 1

因为按钮是一个锚点，href="#"这意味着转到顶部。您可以使用preventDefault来更改此浏览器行为。

 $('.scrollup').click(function(e){
   e.preventDefault();
   $('html, body').animate({ scrollTop: 0 }, 600);
     return false;
 });

更多关于event.preventDefault：http ://api.jquery.com/event.preventDefault/