使用自动页面滚动单击时将 div 浮动到窗口顶部

Question

我正在尝试为 div 元素设置动画，以便在用户单击链接后在浏览器窗口顶部滑出屏幕。当用户向下滚动页面超过某个点时，会出现此链接。当单击 div 时，浏览器窗口会动画并滚动到页面顶部，因为“Back to top” div 会淡出。我需要让这个“回到顶部”的 div 不仅淡出，而且在淡出时滑到屏幕外的浏览器窗口顶部。到目前为止，这是我所拥有的：

Javascript：

$(function(){
    $("#back-to-top").hide();

    $(function() {
        $(window).scroll(function() {
            if($(this).scrollTop() > 100) {
                $('#back-to-top').fadeIn('slow');
            } else {
                $('#back-to-top').fadeOut('slow');
            }
        });

        $('a#back-to-top').click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;

            $('#back-to-top').animate({  // The part that doesn't work
                margin: '-800px 0 0 0'
                // top: '-800px' 
            });
        });
    });
});

Answer 1

我认为问题可能出在return false

 $('a#back-to-top').click(function() {
            $(this).animate({ bottom: '1000px', opacity: 0 }, 2000, function(){
                $('a#back-to-top').hide(function(){
                    $(this).css({ bottom: '40px', opacity: 1 });
                });
            });
            $('body,html').animate({
                scrollTop: 0
            }, 1500);
            return false;
        });

我更新了代码。它可以完美地满足您的要求。动画完成后，您需要恢复链接的位置和不透明度。