Question

这是一个网络应用。从左侧导航列表中单击链接时，其页面内容将显示在右侧窗格中。窗格绝对定位，可以上下滚动。

问题是当页面向下滚动并且随后选择了不同的页面时。将显示新页面，但滚动位置不会恢复/重置。我不明白为什么？

我以前从未见过这个问题。我尝试的解决方案是使用命名锚点，但这不起作用。我读过使用scrollTop并试图实现它，但没有运气。我想坚持使用纯JavaScript。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
 /* Pane configuration */
.left.col { width: 250px; }
.right.col { left: 250px; right: 0; }
.body.row { top: 0px; bottom: 0px; }

/* Generic pane rules */
body { margin: 0; -webkit-text-size-adjust: 100%; }
.page { left: 0; right: 0; top: 0; bottom: 0; }
.row, .col, .page { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-y { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fill, .pane { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100% }
.pane { display: none; }


.body, .pane { background: #ddd }
.right.col { border-left: 1px solid black; }
.right.col .body { padding: 0 1em; }
.listview { padding: 0; margin: 0; font-weight: bold; color: #444; }
.listview li { list-style-type: none; background: #eee; padding: 1em; border-top: 1px solid #aaa; border-bottom: 1px solid #fff; cursor: pointer; }
</style>
</head>

<body>
<div class="left col">
<div class="body row scroll-y">
<ul class="listview">
<li id="linkPage1">Example Page 1</li>
<li id="linkPage2">Example Page 2</li>
<li id="linkPage3">Example Page 3</li>
</ul>
</div>
</div>

<div class="right col">
<div class="body row scroll-y">
<div id="page1">
<h1>Example Page 1</h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis egestas tempus molestie. Nam ut ultrices elit. Suspendisse et mi neque. Cras augue sapien, imperdiet vitae eleifend eget, ornare at justo. Mauris aliquet semper tempor. Nunc sodales diam quis nulla fermentum, scelerisque cursus diam blandit. Nullam quis tellus nibh. Donec facilisis vel nunc nec faucibus. Vestibulum sed magna sed nisl congue viverra. Cras a magna ac purus aliquet ultricies vel non erat. Donec eu urna vitae purus ullamcorper iaculis ac eu lectus. Nulla ultrices, velit sed consequat dignissim, mi risus accumsan orci, sit amet congue dolor tellus non risus. Donec ac ultricies est. Cras aliquet tempus pellentesque.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi volutpat consectetur sapien non porttitor. Nam in mattis turpis. Donec quam nibh, cursus suscipit convallis eget, molestie ac nulla. Integer mi diam, tristique quis elementum non, pharetra id elit. Duis a lacinia ipsum. Vivamus malesuada sollicitudin aliquet. Sed quis nunc eget mi ultrices laoreet. Aliquam erat volutpat. Nunc laoreet gravida mi, eget dignissim arcu adipiscing vel. Ut commodo vitae nunc vitae hendrerit. Nullam tempor venenatis nulla et malesuada. Sed eu pharetra libero, a rhoncus erat.</p>
<p>Quisque vehicula enim sit amet urna scelerisque, eu tempus massa molestie. Maecenas placerat ut tortor vitae eleifend. Donec ornare nec dui et sagittis. Sed sit amet nisl tellus. Phasellus vitae dictum risus. Vivamus tincidunt, lorem vel gravida laoreet, nisl justo dictum tellus, viverra dapibus ligula turpis eget risus. Curabitur placerat diam eget vehicula elementum. Etiam vehicula mi purus, et aliquam magna facilisis sit amet.</p>
<p>Phasellus congue justo purus, sed convallis augue facilisis a. Vestibulum dictum dignissim sapien. Aliquam arcu est, fermentum sit amet tortor et, semper elementum nisl. Vestibulum non volutpat magna. Donec at lobortis mi. Nullam congue leo eu eros cursus suscipit. Nam egestas, urna nec dignissim mollis, erat nulla cursus massa, in facilisis libero lorem interdum lectus. Fusce vel bibendum elit. Vestibulum ullamcorper mi ac consectetur rhoncus. Aenean ut ligula nec dui luctus consectetur.</p>
<p>Maecenas fermentum ipsum venenatis molestie gravida. Suspendisse ut semper orci. Sed vel lacus nisl. Donec adipiscing nunc erat, ac tempus orci consequat vel. Curabitur sit amet luctus libero, ac egestas massa. Ut in ullamcorper velit. Phasellus quam nisl, molestie ut eros vitae, tristique vehicula ligula. Nam consectetur suscipit mollis. Maecenas metus lorem, vestibulum vel posuere ac, volutpat quis nunc.</p>
</div>
<div id="page2">
<h1>Example Page 2</h1>
<p>Quisque vehicula enim sit amet urna scelerisque, eu tempus massa molestie. Maecenas placerat ut tortor vitae eleifend. Donec ornare nec dui et sagittis. Sed sit amet nisl tellus. Phasellus vitae dictum risus. Vivamus tincidunt, lorem vel gravida laoreet, nisl justo dictum tellus, viverra dapibus ligula turpis eget risus. Curabitur placerat diam eget vehicula elementum. Etiam vehicula mi purus, et aliquam magna facilisis sit amet.</p>
<p>Phasellus congue justo purus, sed convallis augue facilisis a. Vestibulum dictum dignissim sapien. Aliquam arcu est, fermentum sit amet tortor et, semper elementum nisl. Vestibulum non volutpat magna. Donec at lobortis mi. Nullam congue leo eu eros cursus suscipit. Nam egestas, urna nec dignissim mollis, erat nulla cursus massa, in facilisis libero lorem interdum lectus. Fusce vel bibendum elit. Vestibulum ullamcorper mi ac consectetur rhoncus. Aenean ut ligula nec dui luctus consectetur.</p>
<p>Maecenas fermentum ipsum venenatis molestie gravida. Suspendisse ut semper orci. Sed vel lacus nisl. Donec adipiscing nunc erat, ac tempus orci consequat vel. Curabitur sit amet luctus libero, ac egestas massa. Ut in ullamcorper velit. Phasellus quam nisl, molestie ut eros vitae, tristique vehicula ligula. Nam consectetur suscipit mollis. Maecenas metus lorem, vestibulum vel posuere ac, volutpat quis nunc.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis egestas tempus molestie. Nam ut ultrices elit. Suspendisse et mi neque. Cras augue sapien, imperdiet vitae eleifend eget, ornare at justo. Mauris aliquet semper tempor. Nunc sodales diam quis nulla fermentum, scelerisque cursus diam blandit. Nullam quis tellus nibh. Donec facilisis vel nunc nec faucibus. Vestibulum sed magna sed nisl congue viverra. Cras a magna ac purus aliquet ultricies vel non erat. Donec eu urna vitae purus ullamcorper iaculis ac eu lectus. Nulla ultrices, velit sed consequat dignissim, mi risus accumsan orci, sit amet congue dolor tellus non risus. Donec ac ultricies est. Cras aliquet tempus pellentesque.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi volutpat consectetur sapien non porttitor. Nam in mattis turpis. Donec quam nibh, cursus suscipit convallis eget, molestie ac nulla. Integer mi diam, tristique quis elementum non, pharetra id elit. Duis a lacinia ipsum. Vivamus malesuada sollicitudin aliquet. Sed quis nunc eget mi ultrices laoreet. Aliquam erat volutpat. Nunc laoreet gravida mi, eget dignissim arcu adipiscing vel. Ut commodo vitae nunc vitae hendrerit. Nullam tempor venenatis nulla et malesuada. Sed eu pharetra libero, a rhoncus erat.</p>
</div>
<div id="page3">
<h1>Example Page 3</h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi volutpat consectetur sapien non porttitor. Nam in mattis turpis. Donec quam nibh, cursus suscipit convallis eget, molestie ac nulla. Integer mi diam, tristique quis elementum non, pharetra id elit. Duis a lacinia ipsum. Vivamus malesuada sollicitudin aliquet. Sed quis nunc eget mi ultrices laoreet. Aliquam erat volutpat. Nunc laoreet gravida mi, eget dignissim arcu adipiscing vel. Ut commodo vitae nunc vitae hendrerit. Nullam tempor venenatis nulla et malesuada. Sed eu pharetra libero, a rhoncus erat.</p>
<p>Quisque vehicula enim sit amet urna scelerisque, eu tempus massa molestie. Maecenas placerat ut tortor vitae eleifend. Donec ornare nec dui et sagittis. Sed sit amet nisl tellus. Phasellus vitae dictum risus. Vivamus tincidunt, lorem vel gravida laoreet, nisl justo dictum tellus, viverra dapibus ligula turpis eget risus. Curabitur placerat diam eget vehicula elementum. Etiam vehicula mi purus, et aliquam magna facilisis sit amet.</p>
<p>Phasellus congue justo purus, sed convallis augue facilisis a. Vestibulum dictum dignissim sapien. Aliquam arcu est, fermentum sit amet tortor et, semper elementum nisl. Vestibulum non volutpat magna. Donec at lobortis mi. Nullam congue leo eu eros cursus suscipit. Nam egestas, urna nec dignissim mollis, erat nulla cursus massa, in facilisis libero lorem interdum lectus. Fusce vel bibendum elit. Vestibulum ullamcorper mi ac consectetur rhoncus. Aenean ut ligula nec dui luctus consectetur.</p>
<p>Maecenas fermentum ipsum venenatis molestie gravida. Suspendisse ut semper orci. Sed vel lacus nisl. Donec adipiscing nunc erat, ac tempus orci consequat vel. Curabitur sit amet luctus libero, ac egestas massa. Ut in ullamcorper velit. Phasellus quam nisl, molestie ut eros vitae, tristique vehicula ligula. Nam consectetur suscipit mollis. Maecenas metus lorem, vestibulum vel posuere ac, volutpat quis nunc.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis egestas tempus molestie. Nam ut ultrices elit. Suspendisse et mi neque. Cras augue sapien, imperdiet vitae eleifend eget, ornare at justo. Mauris aliquet semper tempor. Nunc sodales diam quis nulla fermentum, scelerisque cursus diam blandit. Nullam quis tellus nibh. Donec facilisis vel nunc nec faucibus. Vestibulum sed magna sed nisl congue viverra. Cras a magna ac purus aliquet ultricies vel non erat. Donec eu urna vitae purus ullamcorper iaculis ac eu lectus. Nulla ultrices, velit sed consequat dignissim, mi risus accumsan orci, sit amet congue dolor tellus non risus. Donec ac ultricies est. Cras aliquet tempus pellentesque.</p>
</div>
</div>
</div>

<script>
var pages = [page1, page2, page3];

 // Displays page and hides all other pages
function goToPage(pageID) {
    // Display page
    for (var i = 0; i < pages.length; i++) {
        if (pageID == pages[i].id) {
            // Show page
            pages[i].style.display = "block";
        } else {
            // Hide page
            pages[i].style.display = "none";
        }
    }
}

linkPage1.onclick = function () {
    goToPage("page1");
};

linkPage2.onclick = function () {
    goToPage("page2");
};

linkPage3.onclick = function () {
    goToPage("page3");
};

goToPage("page1");
</script>
</body>
</html>

Answer 1

您需要添加scrollTop = 0更改内容时滚动的div。

所以更新的goToPage函数如下所示：

function goToPage(pageID) {
    document.querySelector('.right .body.row').scrollTop = 0;

    // Display page
    for (var i = 0; i < pages.length; i++) {
        if (pageID == pages[i].id) {
            // Show page
            pages[i].style.display = "block";
        } else {
            // Hide page
            pages[i].style.display = "none";
        }
    }
}

代码已修复here。

当页面更改时，Div滚动位置不会恢复到顶部

1 个答案: