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）;