更改頁面時，Div滾動位置不會恢復到頂部

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";
        }
    }
}

代碼固定在這里。

更改頁面時，Div滾動位置不會恢復到頂部

問題描述

1 個解決方案

解決方案1
3 已采納 2013-09-06 20:33:24

更改頁面時，Div滾動位置不會恢復到頂部

問題描述

1 個解決方案

解決方案1 3 已采納 2013-09-06 20:33:24

解決方案1
3 已采納 2013-09-06 20:33:24