jQuery滚动到顶部

Question

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

我改进了代码，它的工作原理。

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

这是怎么来的？

这是一个jsFiddle：

Answer 1

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

第一个更改是将您的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);
    });
}

我们得到了预期的效果，需要一些调整，但你得到了一般的图片。 希望我帮忙。 小提琴

Answer 2

把它放在回到顶部按钮的clck处理程序中：$（'html'）。scrollTop（0）;