Question

我正在尝试动画div元素，以便在用户点击链接后在浏览器窗口顶部滑动屏幕。当用户向下滚动页面超过某一点时，会出现此链接。单击div时，浏览器窗口会动画并滚动到页面顶部，因为“返回顶部”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;
        });

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

通过自动页面滚动单击窗口顶部的浮点数

1 个答案: