Javascript 页面更改时，Div滚动位置不返回顶部_Javascript_Html_Css_Dom

Javascript 页面更改时，Div滚动位置不返回顶部

javascript html css dom

Javascript 页面更改时，Div滚动位置不返回顶部,javascript,html,css,dom,Javascript,Html,Css,Dom,这是一个网络应用程序。从左侧导航列表中单击链接时，其页面内容将显示在右侧窗格中。窗格是绝对定位的，可以上下滚动问题是当一个页面向下滚动，然后选择另一个页面时。将显示新页面，但滚动位置不会恢复/重置。我不明白为什么小提琴：我以前从未见过这个问题。我尝试的解决方案是使用命名锚，但没有成功。我阅读了使用scrollTop并尝试实现它，但没有成功。我想坚持使用纯JavaScript <!doctype html> <html> <head> <meta c

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

问题是当一个页面向下滚动，然后选择另一个页面时。将显示新页面，但滚动位置不会恢复/重置。我不明白为什么

小提琴：

我以前从未见过这个问题。我尝试的解决方案是使用命名锚，但没有成功。我阅读了使用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>


无标题文件
/*窗格配置*/
.left.col{宽度：250px；}
.right.col{左：250px；右：0；}
.body.row{top:0px；bottom:0px；}
/*通用窗格规则*/
正文{margin:0；-webkit文本大小调整：100%；}
.page{左：0；右：0；上：0；下：0；}
.row、.col、.page{溢出：隐藏；位置：绝对；}
.行{左：0；右：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{位置：绝对；左侧：0；顶部：0；右侧：0；底部：0；宽度：100%；高度：100%}
.pane{显示：无；}
.body、.pane{background:#ddd}
.right.col{左边框：1px纯黑色；}
.right.col.body{padding:0 1em；}
.listview{填充：0；边距：0；字体大小：粗体；颜色：#444；}
.listview li{列表样式类型：无；背景：#eee；填充：1em；边框顶部：1px实心#aaa；边框底部：1px实心#fff；光标：指针；}

示例第1页
示例第2页
第3页示例

示例第1页
对于所有的错误，我们都要清楚地认识到这一点，因为我们必须清楚地认识到，所有人都应该受到赞扬、尊重和尊重，因为他们都是发明家和准建筑师。Nemo enim ipsam Voluptate是一个有着丰富经验的人，他是一个理性的人。最重要的一点是，在劳动和就业领域，所有人都有自己的权利、义务和义务。但是最低限度的成本，是否需要在实验室中进行实际操作，是否需要从消费品中获得流动性？你是否应该在一个自由的世界里为自己的利益辩护？你是否应该在一个自由的世界里为自己的利益辩护
Lorem ipsum dolor sit amet，是一位杰出的献身者。我是埃吉斯塔斯·坦普斯·莫尔斯蒂。Nam ut ultrices Elite。Suspendisse和mi neque。克拉斯·奥古斯·萨皮恩，埃列芬德·埃吉特帝国饮食，奥纳雷在胡斯托。莫里斯·阿利奎特·森佩尔临时。不含发酵剂的苏打水，不含发酵剂的糖浆。我不知道。不要使用任何设备。前庭是一个巨大的前庭。这是一个巨大的灾难。请不要为我的健康而烦恼。无名小卒，有尊严的人，有责任的人，有责任的人，有责任的人。Donec ac ultricies est。这是我的生日
佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。莫比·沃里帕特·康塞特图尔·萨皮恩·诺波特。Nam在mattis turpis。不要这样做，你要相信我，你要相信我。整数米直径，三重元素非，药剂师id精英。Du是一个lacinia ipsum。马来苏阿达·索利西图丁·阿利奎特万岁。这是我的荣幸。阿利奎姆·埃拉特·帕特。我是一个孕妇，我是一个有尊严的人。我们的生活很普通。暂时性的威尼斯人之罪。塞德·欧盟·法雷特拉·利伯罗，一位朗卡斯·埃拉特
这是一个很好的例子。这是一个令人难忘的时刻。不要让你的孩子和你的孩子在一起。他坐在那里。生命之相。tincidunt Vivamus，lorem vel gradida laoreet，nisl justo dictum tellus，dapibus ligula turpis eget risus viverra。箭毒掌。我们的交通工具和巨大的设施都在我们身边
这是一个很好的例子。前庭是智者的权威。阿利夸姆·阿库·伊斯特，发酵剂是一种玉米饼，是一种营养素。无蜗大前庭。多内克在密苏里州洛博蒂斯。你爱我，我爱你。Nam egestas，urna nec Dignessim mollis，erat nulla cursus massa，在自由知识中心。这是最好的。前庭为穹窿。我们的宗教信仰是神圣的
妊娠期葡萄球菌。我是塞姆佩尔·奥奇。这是一个严重的缺陷。请不要在任何时候或在任何情况下进行协商。阿梅特·卢克图斯·利伯罗（amet luctus libero），ac埃格斯塔斯·马萨（ac Egesta massa）。ullamcorper velit的Ut。Phasellus quam nisl，molestie ut eros vitae，tristique Vehicleua ligula。Nam Concertetur suscipit mollis。梅塞纳斯·梅特斯·洛雷姆，波苏尔·ac前庭，帕特·奎斯·努克
示例第2页
这是一个很好的例子。这是一个令人难忘的时刻。不要让你的孩子和你的孩子在一起。他坐在那里。生命之相。tincidunt Vivamus，lorem vel gradida laoreet，nisl justo dictum tellus，dapibus ligula turpis eget risus viverra。箭毒掌。我们的交通工具和巨大的设施都在我们身边
这是一个很好的例子。前庭是智者的权威。阿利夸姆·阿库·伊斯特（Aliquam arcu est），酵母菌位于阿梅特·托托（amet torto）
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";
        }
    }
}