Question

我有2个元素，第一个元素（在顶部）有以下css属性：

header {
   position: relative;
   height: 100%;
   width: 100%;
   background-color: black;
}

这使得它的大小与浏览器的视口大小有关，因为我想要那个结果。我还必须为html, body元素提供css属性才能使用（用第一个元素填充屏幕）：

html, body {
   height: 100%;
   width: 100%;
}

我看到的第二个元素是这样的：

#content {
    display: none;
    position: relative;
    height: 1500px;
    width: 100%;  

    background-color: yellow;
}

此元素位于第一个元素下方。

如您所见，此元素已隐藏。那是因为当我点击第一个元素（wich you can see in the jsFiddle）上的按钮时，它会显示#content元素，滚动到该元素，并隐藏我们来自的地方（header）。完成滚动。

非常完美，我在这里得到了这个功能：

var showScrollHide = function(showTime, element, eleTime, hide, hideTime, func) {
    var _ele = $(element),
        _hide = $(hide);
    _ele.fadeIn(showTime, function() {
        $('html, body').animate({
            scrollTop: _ele.offset().top
        }, eleTime, function() {
            _hide.fadeOut(hideTime, func ? func : null);
        });
    });
};

我正在通过这段代码调用该函数：

$('.exploreBtn').on('click', function() {
    showScrollHide(500, content, 1000, header, 250, function() {
        $(window).scrollTop(0);
        $('.scrollBackBtn').fadeIn();
    });
});

在上面的代码片段中，我必须调用$(window).scrollTop(0);否则它会在滚动完成后向下滚动页面。我现在也显示了滚动后退按钮，但这就是问题所在。

当我在第二个元素上时，上面的函数隐藏了它上面的元素。我尝试使用相同的功能将其向上滚动，这意味着：

显示上面的元素
滚动到它
淡出我们来自的元素

它只会让我对尝试滚动的元素有所淡化。

当我从函数中删除所有代码时，只使用了这个：

$('header').fadeIn();

它只是做了同样的事情并且自动地将屏幕褪色到我们刚刚消失的那个元素。这意味着它向上滚动，但不是任何动画或任何动画。

Here is a jsFiddle to show what im doing

顺便说一句，我已经在@Loktar的帮助下使用这段代码解决了这个问题，但是我仍然不确定它是否是正确的方法：

$('.scrollBackBtn').on('click', function() {
     $(window).scrollTop(0);
    $(header).slideDown();
});

Answer 1

如果我理解正确，以下情况应该有效。

_scrollBackBtn.on('click', function() {
     _window.scrollTop(0);
    $(header).slideDown();
});

<强> Live Demo

当上面的元素淡入时，页面跳转会上升

1 个答案: