为什么打开 CSS 弹出窗口时页面会滚动到顶部？
Why does the page scroll to the top when opening a CSS popup?
我有一个纯 CSS 弹出框用于移动设备上的导航菜单。每当我单击菜单的三明治按钮时，屏幕都会跳到页面顶部。这是什么，我怎样才能让它停止？ Here's my source code.
<!DOCTYPE HTML>
<html>
<head>
<style>
@font-face {
font-family: 'HK Explorer';
src: url('HKExplorer-Regular.eot');
src: url('HKExplorer-Regular.eot?#iefix') format('embedded-opentype'), url('HKExplorer-Regular.woff') format('woff'), url('HKExplorer-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Genome';
src: url('Genome-Thin.eot');
src: url('Genome-Thin.eot?#iefix') format('embedded-opentype'), url('Genome-Thin.woff') format('woff'), url('Genome-Thin.ttf') format('truetype');
}
html,
body {
overflow-x: hidden;
margin: 0;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
#triangle {
width: 0;
height: 0;
border-top: 75px solid #113344;
border-right: 90px solid transparent;
color: white;
position: fixed;
z-index: -100;
display: block;
}
.navmenu {
position: absolute;
display: block;
margin: 6px;
margin-top: -67px;
float: left;
cursor: pointer;
transition: all 0.3s ease-out;
}
.box1 {
background-color: #FF5444;
border-radius: 20%;
width: 30px;
height: 6.439px;
}
.box2 {
background-color: #FF5444;
border-radius: 20%;
width: 30px;
height: 6.439px;
margin-top: 4px;
margin-bottom: 4px;
}
.box3 {
background-color: #FF5444;
border-radius: 20%;
width: 30px;
height: 6.439px;
}
.popup {
padding: 1px;
background: #0E7BA3;
width: 140px;
position: fixed;
transition: all 200ms ease-in-out;
margin-left: 6px;
margin-top: 50px;
font-family: 'Roboto', sans-serif;
line-height: 20px;
color: #fff;
text-decoration: underline;
}
.popuptriangle {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #0E7BA3;
position: fixed;
z-index: -100;
margin-left: 6px;
margin-top: 35px;
transition: all 200ms ease-in-out;
}
.nav {
margin-bottom: 2px;
margin-left: 5px;
padding-top: 10px;
margin-top: 5px;
}
.navitem img {
display: inline;
vertical-align: middle;
margin-left: -40px;
padding-right: 10px;
}
.navitem {
padding-bottom: 10px;
}
.popup .close {
position: absolute;
text-align: right;
margin-left: 122px;
transition: all 200ms;
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-decoration: none;
color: #fff;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: opacity 200ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
#content {
position: absolute;
z-index: -1000000;
margin-top: 35px;
}
#title {
text-align: center;
border-bottom: 5px solid #FF5444;
width: 50%;
margin-left: auto;
margin-right: auto;
font-family: 'Roboto', sans-serif;
font-size: 300%;
letter-spacing: 1px;
}
#copy {
text-align: center;
margin-top: 3%;
font-family: 'Palanquin', sans-serif;
padding: 1%;
font-size: 100%;
line-height: 22px;
}
</style>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href='https://fonts.googleapis.com/css?family=Palanquin:200|Roboto:500' rel='stylesheet' type='text/css'>
</head>
<title>testing</title>
<body>
<div id="triangle">
<div class="navmenu">
<a class="button" href="#popup1">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</a>
</div>
</div>
<div id="popup1" class="overlay">
<div class="popuptriangle"></div>
<div class="popup">
<a class="close" href="#">x</a>
<div class="content">
<ul class="nav">
<div class="navitem">
<a href="#"><img src="http://i59.tinypic.com/99ozgp.png" width="30px">About</a>
</div>
<div class="navitem">
<a href="#"><img src="http://i59.tinypic.com/v4weoo.png" width="30px">Portfolio</a>
</div>
<div class="navitem">
<a href="#"><img src="http://i60.tinypic.com/pay4i.png" width="30px">Resources</a>
</div>
<div class="navitem">
<a href="#"><img src="http://i57.tinypic.com/29zdj51.png" width="30px">Contact</a>
</div>
</ul>
</div>
</div>
</div>
<div id="content">
<div id="title">
Hello.
</div>
<div id="copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac volutpat sem. Nam congue pellentesque augue. Aliquam aliquam erat enim, eget luctus dolor luctus eu. Maecenas risus ipsum, consectetur ac tempus quis, scelerisque sed risus. Vivamus tincidunt velit enim, nec aliquet erat pellentesque eget. Nunc eleifend, nibh sed aliquam commodo, justo felis convallis nunc, a varius justo nisi sit amet eros. In maximus finibus elit sed auctor. Curabitur hendrerit leo id congue vehicula. Maecenas sed lacus non purus fringilla vulputate in blandit purus.
</div>
</div>
</body>
div#triangle 具有 position: fixed，这将其置于正常的 DOM 流程之外 (http://www.w3.org/TR/WD-DOM/introduction.html)。固定位置基本上意味着元素的位置跟随用户的滚动。默认情况下，元素有 position: static ，这会将它们放在顶部或彼此内联。因此 #popup1 是第一个 "static" 元素，因此它位于页面顶部。
一个修复方法是修复 #popup1 以便它也跟随用户的滚动。
#popup1 {
position: fixed;
top: 0;
left: 0;
}
我有一个纯 CSS 弹出框用于移动设备上的导航菜单。每当我单击菜单的三明治按钮时，屏幕都会跳到页面顶部。这是什么，我怎样才能让它停止？ Here's my source code.
<!DOCTYPE HTML>
<html>
<head>
<style>
@font-face {
font-family: 'HK Explorer';
src: url('HKExplorer-Regular.eot');
src: url('HKExplorer-Regular.eot?#iefix') format('embedded-opentype'), url('HKExplorer-Regular.woff') format('woff'), url('HKExplorer-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Genome';
src: url('Genome-Thin.eot');
src: url('Genome-Thin.eot?#iefix') format('embedded-opentype'), url('Genome-Thin.woff') format('woff'), url('Genome-Thin.ttf') format('truetype');
}
html,
body {
overflow-x: hidden;
margin: 0;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
#triangle {
width: 0;
height: 0;
border-top: 75px solid #113344;
border-right: 90px solid transparent;
color: white;
position: fixed;
z-index: -100;
display: block;
}
.navmenu {
position: absolute;
display: block;
margin: 6px;
margin-top: -67px;
float: left;
cursor: pointer;
transition: all 0.3s ease-out;
}
.box1 {
background-color: #FF5444;
border-radius: 20%;
width: 30px;
height: 6.439px;
}
.box2 {
background-color: #FF5444;
border-radius: 20%;
width: 30px;
height: 6.439px;
margin-top: 4px;
margin-bottom: 4px;
}
.box3 {
background-color: #FF5444;
border-radius: 20%;
width: 30px;
height: 6.439px;
}
.popup {
padding: 1px;
background: #0E7BA3;
width: 140px;
position: fixed;
transition: all 200ms ease-in-out;
margin-left: 6px;
margin-top: 50px;
font-family: 'Roboto', sans-serif;
line-height: 20px;
color: #fff;
text-decoration: underline;
}
.popuptriangle {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #0E7BA3;
position: fixed;
z-index: -100;
margin-left: 6px;
margin-top: 35px;
transition: all 200ms ease-in-out;
}
.nav {
margin-bottom: 2px;
margin-left: 5px;
padding-top: 10px;
margin-top: 5px;
}
.navitem img {
display: inline;
vertical-align: middle;
margin-left: -40px;
padding-right: 10px;
}
.navitem {
padding-bottom: 10px;
}
.popup .close {
position: absolute;
text-align: right;
margin-left: 122px;
transition: all 200ms;
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-decoration: none;
color: #fff;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: opacity 200ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
#content {
position: absolute;
z-index: -1000000;
margin-top: 35px;
}
#title {
text-align: center;
border-bottom: 5px solid #FF5444;
width: 50%;
margin-left: auto;
margin-right: auto;
font-family: 'Roboto', sans-serif;
font-size: 300%;
letter-spacing: 1px;
}
#copy {
text-align: center;
margin-top: 3%;
font-family: 'Palanquin', sans-serif;
padding: 1%;
font-size: 100%;
line-height: 22px;
}
</style>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href='https://fonts.googleapis.com/css?family=Palanquin:200|Roboto:500' rel='stylesheet' type='text/css'>
</head>
<title>testing</title>
<body>
<div id="triangle">
<div class="navmenu">
<a class="button" href="#popup1">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</a>
</div>
</div>
<div id="popup1" class="overlay">
<div class="popuptriangle"></div>
<div class="popup">
<a class="close" href="#">x</a>
<div class="content">
<ul class="nav">
<div class="navitem">
<a href="#"><img src="http://i59.tinypic.com/99ozgp.png" width="30px">About</a>
</div>
<div class="navitem">
<a href="#"><img src="http://i59.tinypic.com/v4weoo.png" width="30px">Portfolio</a>
</div>
<div class="navitem">
<a href="#"><img src="http://i60.tinypic.com/pay4i.png" width="30px">Resources</a>
</div>
<div class="navitem">
<a href="#"><img src="http://i57.tinypic.com/29zdj51.png" width="30px">Contact</a>
</div>
</ul>
</div>
</div>
</div>
<div id="content">
<div id="title">
Hello.
</div>
<div id="copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac volutpat sem. Nam congue pellentesque augue. Aliquam aliquam erat enim, eget luctus dolor luctus eu. Maecenas risus ipsum, consectetur ac tempus quis, scelerisque sed risus. Vivamus tincidunt velit enim, nec aliquet erat pellentesque eget. Nunc eleifend, nibh sed aliquam commodo, justo felis convallis nunc, a varius justo nisi sit amet eros. In maximus finibus elit sed auctor. Curabitur hendrerit leo id congue vehicula. Maecenas sed lacus non purus fringilla vulputate in blandit purus.
</div>
</div>
</body>
div#triangle 具有 position: fixed，这将其置于正常的 DOM 流程之外 (http://www.w3.org/TR/WD-DOM/introduction.html)。固定位置基本上意味着元素的位置跟随用户的滚动。默认情况下，元素有 position: static ，这会将它们放在顶部或彼此内联。因此 #popup1 是第一个 "static" 元素，因此它位于页面顶部。
一个修复方法是修复 #popup1 以便它也跟随用户的滚动。
#popup1 {
position: fixed;
top: 0;
left: 0;
}