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/

动画滚动顶视事件不起作用

1 个答案: