Question

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

我改进了代码，但它确实有效。

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

这是怎么来的？

Here's a jsFiddle:

Answer 1

为了达到预期的效果，你需要稍微改变你的标记/ css和js逻辑，截至目前你正在隐藏顶部元素，所以一旦滚动完成，底部元素的偏移顶部= 0。 / p>

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

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

Answer 2

把它放在回到顶部按钮的点击处理程序中： $（＆＃39; html＆＃39;）。scrollTop（0）;

jQuery滚动到顶部

2 个答案: