问题描述
此示例使用 html5 和 CSS，但不使用 JavaScript。
加载此文件时，地址栏包含“../Filename.html”。
下面的代码包含一个指向“Section 02”的内部超链接。单击时，它会正确强制向下滚动到页面底部。正如预期的那样，这也会将地址栏更新为“../Filename.html#section02”。
然后，按预期点击浏览器的“返回一页”按钮将地址栏重置为“../Filename.html”。但浏览器窗口不会滚动回超链接。
在CSS中，我可以通过将“main{position: fixed;}”更改为“main{position: static;}”来解决问题，但这会将垂直滚动条移到最右侧。
html 如下。 （我的 html 是 xml 兼容的，因此我可以使用 xml 实用程序构建我的文件。）
<?xml version="1.0"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<Meta name="generator" content="HTML Tidy for HTML5 for Windows version 5.7.35" />
<Meta charset="utf-8" xmlns="" />
<title>Testing Vertical Scroll in History</title>
<Meta name="author" content="Paul Margus,FSA,MAAA" xmlns="" />
<Meta name="viewport" content="width=device-width,initial-scale=1." xmlns="" />
<Meta name="description" content="Testing Vertical Scroll in History" xmlns="" />
<style xml:space="preserve">
body{
background-color: blue;
}
header {
position: fixed;
background-color: azure;
top: 0px;
left: 0px;
width: 100%;
height: 115px;
}
main {
/*position: static;*/ /* Within a document,this ENABLES the "Go back one page" scrolling,but MISPLACES the right-hand scrollbar. */
position: fixed; /* Within a document,this disABLES the "Go back one page" scrolling,but PROPERLY PLACES the right-hand scrollbar. */
background-color: cornsilk;
top: 115px;
bottom: 65px;
left: 0%;
width: 65%;
overflow: scroll;
}
aside {
position: fixed;
background-color: WhiteSmoke;
top: 115px;
bottom: 65px;
left: 65%;
width: 35%;
overflow: scroll;
}
footer {
position: fixed;
background-color: aquamarine;
bottom: 0px;
left: 0px;
width: 100%;
height: 65px;
}
</style>
</head>
<body onload="initialize();">
<header id="Header">
<h1>
Testing Vertical Scroll in History
</h1>
<h2>
My Header Layout
</h2>
</header>
<aside id="AsideButtons" data-paragraphlevels="section" xmlns="">
<h2>
My Aside Layout
</h2>
<p>
Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec dui nunc mattis enim ut tellus elementum sagittis. Duis at tellus at urna condimentum mattis pellentesque. Vitae congue mauris rhoncus aenean. Phasellus egestas tellus rutrum tellus. Ipsum a arcu cursus vitae congue. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Tincidunt arcu non soDales neque soDales ut etiam. Et malesuada fames ac turpis. Gravida arcu ac tortor dignissim convallis. Egestas diam in arcu cursus euismod quis. Erat pellentesque adipiscing commodo elit at imperdiet. Ut sem nulla pharetra diam sit. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed. Non nisi est sit amet facilisis magna etiam tempor orci. Bibendum at varius vel pharetra vel turpis nunc eget lorem. Bibendum neque egestas congue quisque egestas diam in arcu cursus. Eu facilisis sed odio morbi quis commodo odio aenean. Lectus proin nibh nisl condimentum id venenatis a condimentum vitae. Malesuada nunc vel risus commodo viverra maecenas.
</p>
</aside>
<main xmlns="">
<h2>
My Main Layout
</h2>
<h3 id="section01">
Section 01
</h3>
<p>
Go to <a href="#section02">Section 02</a>,and then click "Go back one page". Scrolling doesn't work.
</p>
<p>
Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec dui nunc mattis enim ut tellus elementum sagittis. Duis at tellus at urna condimentum mattis pellentesque. Vitae congue mauris rhoncus aenean. Phasellus egestas tellus rutrum tellus. Ipsum a arcu cursus vitae congue. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Tincidunt arcu non soDales neque soDales ut etiam. Et malesuada fames ac turpis. Gravida arcu ac tortor dignissim convallis. Egestas diam in arcu cursus euismod quis. Erat pellentesque adipiscing commodo elit at imperdiet. Ut sem nulla pharetra diam sit. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed. Non nisi est sit amet facilisis magna etiam tempor orci. Bibendum at varius vel pharetra vel turpis nunc eget lorem. Bibendum neque egestas congue quisque egestas diam in arcu cursus. Eu facilisis sed odio morbi quis commodo odio aenean. Lectus proin nibh nisl condimentum id venenatis a condimentum vitae. Malesuada nunc vel risus commodo viverra maecenas.
</p>
<p>
Euismod elementum nisi quis eleifend quam. Praesent elementum facilisis leo vel fringilla est ullamcorper. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Facilisis leo vel fringilla est ullamcorper eget. Tincidunt augue interdum velit euismod in pellentesque massa. Habitant morbi tristique senectus et netus et malesuada fames ac. Bibendum enim facilisis gravida neque convallis a. A lacus vestibulum sed arcu. Enim ut tellus elementum sagittis vitae. Augue neque gravida in fermentum et sollicitudin ac orci phasellus. Sem fringilla ut morbi tincidunt augue interdum velit euismod. Placerat vestibulum lectus mauris ultrices. Quis lectus nulla at volutpat diam. Consequat mauris nunc congue nisi vitae suscipit. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Duis at consectetur lorem donec massa sapien faucibus. Mauris augue neque gravida in fermentum et sollicitudin ac orci.
</p>
<p>
Mauris ultrices eros in cursus turpis massa tincidunt. Et pharetra pharetra massa massa ultricies mi quis. Non curabitur gravida arcu ac tortor dignissim convallis aenean. Viverra nam libero justo laoreet sit. Non pulvinar neque laoreet suspendisse interdum consectetur. Pharetra pharetra massa massa ultricies mi quis. Venenatis cras sed felis eget velit. Purus semper eget duis at tellus at urna condimentum mattis. Nulla facilisi nullam vehicula ipsum a arcu. Fusce id velit ut tortor pretium viverra suspendisse potenti nullam. Donec enim diam vulputate ut pharetra sit. Orci phasellus egestas tellus rutrum. Arcu cursus vitae congue mauris.
</p>
<p>
Molestie at elementum eu facilisis sed odio morbi quis. Cursus metus aliquam eleifend mi in. Erat imperdiet sed euismod nisi porta lorem mollis. Magna fringilla urna porttitor rhoncus dolor purus non enim. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Sed odio morbi quis commodo. Laoreet non curabitur gravida arcu. Phasellus faucibus scelerisque eleifend donec pretium. In nisl nisi scelerisque eu ultrices vitae auctor eu augue. Duis ut diam quam nulla. Porttitor rhoncus dolor purus non. Feugiat in fermentum posuere urna nec tincidunt. Aliquet sagittis id consectetur purus. Eget lorem dolor sed viverra ipsum nunc aliquet. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Lectus magna fringilla urna porttitor. Libero nunc consequat interdum varius. SoDales ut eu sem integer vitae justo eget magna fermentum.
</p>
<p>
Id donec ultrices tincidunt arcu non soDales neque soDales ut. Nunc eget lorem dolor sed viverra. Egestas sed sed risus pretium. Volutpat lacus laoreet non curabitur. Mattis rhoncus urna neque viverra justo nec ultrices dui. Sed sed risus pretium quam vulputate. Morbi tincidunt ornare massa eget egestas purus viverra. Ante in nibh mauris cursus mattis molestie a. Faucibus pulvinar elementum integer enim neque volutpat ac. Suscipit adipiscing bibendum est ultricies. Eget duis at tellus at urna. Pellentesque id nibh tortor id aliquet. Amet commodo nulla facilisi nullam vehicula ipsum. Eros in cursus turpis massa tincidunt dui.
</p>
<p>
Tristique senectus et netus et malesuada fames. Sit amet consectetur adipiscing elit ut aliquam purus. Non blandit massa enim nec dui. Pulvinar mattis nunc sed blandit libero. Venenatis lectus magna fringilla urna porttitor. Massa placerat duis ultricies lacus sed. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Sed ullamcorper morbi tincidunt ornare massa. Vel pretium lectus quam id leo in vitae. Donec adipiscing tristique risus nec feugiat in fermentum. Eget duis at tellus at urna condimentum. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Velit scelerisque in dictum non. Tortor condimentum lacinia quis vel eros donec ac odio.
</p>
<p>
Sem fringilla ut morbi tincidunt augue interdum velit. Nibh cras pulvinar mattis nunc. Faucibus pulvinar elementum integer enim. Purus faucibus ornare suspendisse sed nisi lacus. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus et. Volutpat commodo sed egestas egestas. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Pellentesque habitant morbi tristique senectus et netus et. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Senectus et netus et malesuada fames ac turpis egestas sed. Viverra maecenas accumsan lacus vel facilisis volutpat est velit egestas. Tortor consequat id porta nibh venenatis. Turpis egestas sed tempus urna et. Sagittis vitae et leo duis ut diam. Risus in hendrerit gravida rutrum quisque non tellus orci. Quam quisque id diam vel. Viverra aliquet eget sit amet tellus cras. Adipiscing vitae proin sagittis nisl rhoncus mattis. Arcu risus quis varius quam quisque.
</p>
<p>
Mauris augue neque gravida in fermentum et sollicitudin ac orci. Integer enim neque volutpat ac tincidunt vitae semper quis. Cursus mattis molestie a iaculis at. Sapien eget mi proin sed libero enim sed faucibus. Volutpat blandit aliquam etiam erat velit scelerisque. Euismod nisi porta lorem mollis. Donec ac odio tempor orci. Purus semper eget duis at tellus. Sed risus pretium quam vulputate dignissim suspendisse in. Metus vulputate eu scelerisque felis imperdiet.
</p>
<p>
Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec dui nunc mattis enim ut tellus elementum sagittis. Duis at tellus at urna condimentum mattis pellentesque. Vitae congue mauris rhoncus aenean. Phasellus egestas tellus rutrum tellus. Ipsum a arcu cursus vitae congue. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Tincidunt arcu non soDales neque soDales ut etiam. Et malesuada fames ac turpis. Gravida arcu ac tortor dignissim convallis. Egestas diam in arcu cursus euismod quis. Erat pellentesque adipiscing commodo elit at imperdiet. Ut sem nulla pharetra diam sit. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed. Non nisi est sit amet facilisis magna etiam tempor orci. Bibendum at varius vel pharetra vel turpis nunc eget lorem. Bibendum neque egestas congue quisque egestas diam in arcu cursus. Eu facilisis sed odio morbi quis commodo odio aenean. Lectus proin nibh nisl condimentum id venenatis a condimentum vitae. Malesuada nunc vel risus commodo viverra maecenas.
</p>
<p>
Euismod elementum nisi quis eleifend quam. Praesent elementum facilisis leo vel fringilla est ullamcorper. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Facilisis leo vel fringilla est ullamcorper eget. Tincidunt augue interdum velit euismod in pellentesque massa. Habitant morbi tristique senectus et netus et malesuada fames ac. Bibendum enim facilisis gravida neque convallis a. A lacus vestibulum sed arcu. Enim ut tellus elementum sagittis vitae. Augue neque gravida in fermentum et sollicitudin ac orci phasellus. Sem fringilla ut morbi tincidunt augue interdum velit euismod. Placerat vestibulum lectus mauris ultrices. Quis lectus nulla at volutpat diam. Consequat mauris nunc congue nisi vitae suscipit. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Duis at consectetur lorem donec massa sapien faucibus. Mauris augue neque gravida in fermentum et sollicitudin ac orci.
</p>
<p>
Mauris ultrices eros in cursus turpis massa tincidunt. Et pharetra pharetra massa massa ultricies mi quis. Non curabitur gravida arcu ac tortor dignissim convallis aenean. Viverra nam libero justo laoreet sit. Non pulvinar neque laoreet suspendisse interdum consectetur. Pharetra pharetra massa massa ultricies mi quis. Venenatis cras sed felis eget velit. Purus semper eget duis at tellus at urna condimentum mattis. Nulla facilisi nullam vehicula ipsum a arcu. Fusce id velit ut tortor pretium viverra suspendisse potenti nullam. Donec enim diam vulputate ut pharetra sit. Orci phasellus egestas tellus rutrum. Arcu cursus vitae congue mauris.
</p>
<p>
Molestie at elementum eu facilisis sed odio morbi quis. Cursus metus aliquam eleifend mi in. Erat imperdiet sed euismod nisi porta lorem mollis. Magna fringilla urna porttitor rhoncus dolor purus non enim. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Sed odio morbi quis commodo. Laoreet non curabitur gravida arcu. Phasellus faucibus scelerisque eleifend donec pretium. In nisl nisi scelerisque eu ultrices vitae auctor eu augue. Duis ut diam quam nulla. Porttitor rhoncus dolor purus non. Feugiat in fermentum posuere urna nec tincidunt. Aliquet sagittis id consectetur purus. Eget lorem dolor sed viverra ipsum nunc aliquet. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit. Pharetra massa massa ultricies mi quis hendrerit dolor magna eget. Lectus magna fringilla urna porttitor. Libero nunc consequat interdum varius. SoDales ut eu sem integer vitae justo eget magna fermentum.
</p>
<h3 id="section02">
Section 02
</h3>
<p>
Mauris augue neque gravida in fermentum et sollicitudin ac orci. Integer enim neque volutpat ac tincidunt vitae semper quis. Cursus mattis molestie a iaculis at. Sapien eget mi proin sed libero enim sed faucibus. Volutpat blandit aliquam etiam erat velit scelerisque. Euismod nisi porta lorem mollis. Donec ac odio tempor orci. Purus semper eget duis at tellus. Sed risus pretium quam vulputate dignissim suspendisse in. Metus vulputate eu scelerisque felis imperdiet.
</p>
</main>
<footer id="Footer" xmlns="">
<h2>
My Footer Layout
</h2>
</footer>
</body>
</html>
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）