javascript - jQuery 滚动回到顶部

Question

根据 this post我问了如何制作一个显示元素的滚动方法，滚动到它并隐藏我来自的元素。

我改进了该代码，并且它有效。

但是当我尝试向后执行此操作时，再次从第二个屏幕到第一个屏幕。它不工作。它只会滚动到 #content 屏幕的顶部...

这是怎么来的？

Here's a jsFiddle:

Answer 1

为了达到预期的效果，您需要稍微更改标记/css 和 js 逻辑，因为现在您隐藏了顶部元素，所以一旦滚动完成，底部元素的偏移量 top = 0。

第一个更改是将您的 html 包装在 <div> 中我们会给那个 div 一个 id #container .其次，我们需要将容器的位置设置为绝对位置，以便我们可以在单击按钮时上下滑动它。

CSS:

html,body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow:hidden;
}
#page1 {
    height: 100%;
    width: 100%;
}
#content {
    height: 100%;
    width: 100%;
    overflow-y:scroll;
}
#exploreBtn {
    height: 50px;
    width: 50px;
    background-color: red;
}
#goBack {
    position: fixed;
    bottom: 5%;
    right: 5%;
    height: 50px;
    width: 50px;
    background-color: purple;
}
#container {
    position:absolute;
    width:100%;
    height:100%;
}

最后我们需要更改 js:

$(document).ready(function () {
    $('#exploreBtn').on('click', function () {
        showScrollHide('#content', '#page1');
    });

    $('#goBack').on('click', function () {
        showScrollHide('#page1', '#content');
    });
});

function showScrollHide(element, hide) {
    var _ele = $(element),
        _container = $('#container'),
        _ele_top = _ele.offset().top;
    if(_ele_top < 0)
        _ele_top = 0;
    console.log(_ele_top);
    _ele.fadeIn(500, function () {
        _container.stop().animate({
            top: - _ele_top
        }, 1000);
    });
}

我们得到了预期的效果，需要一些调整，但您已经了解了总体情况。希望我有所帮助。 The fiddle