Question

我通过定义每个充当页面的2个div来模拟我有多个页面。当时只显示一页。那些div是：

divProjectList
divProjectListItem

当用户打开网站时，div＆＃div; divProjectList＆＃39;显示。此div包含带有项目的无序列表。这是一个很长的列表，因此它是可排序的。

用户点击列表中的某个项目后，我会$('#divProjectList').hide()，然后是$('#divProjectListItem').show()。该列表现在对用户不可见，而是显示他从列表中选择的项目的项目详细信息。

只要用户点击关闭按钮，它就会以相反的方式工作。项目详细信息页面正在隐藏，项目列表页面将再次显示。

如果用户向下滚动了一点（或几页），则项目列表会滚动回第一个项目，而他点击的项目现在已不在视图中。

我有一个JSFiddle，它有一个隐藏和显示按钮以及一个模拟上述行为的列表。

我想知道这是否是我在这里看到的预期行为以及我如何规避这一点。现在我通过执行$ .ScrollTo来解决它：

$('#' + currentProjectId).ScrollTo({duration: 0, offsetTop: 151})

Answer 1

此jquery代码会提醒您滚动到的位置，并在按下显示按钮时将其返回到那里：

http://jsfiddle.net/py7zemLo/1/

jquery的：

var scroll;

    $("#btnHide").on("click", function (e) {
        scroll = $(document).scrollTop();
        // $("#divOptions").hide();
        $("#divOptions").css('display', 'none');
    })

    $("#btnShow").on("click", function (e) {
        // $("#divOptions").show();
        $("#divOptions").css('display', 'block');
        if ( scroll !== null ) {
            $(document).scrollTop(scroll);
        }
    })

我希望这可以帮到你！

隐藏和显示div导致此div中的列表滚动到顶部

1 个答案: