0
我有一個純CSS的彈出框被用於移動導航菜單。無論何時點擊菜單的三明治按鈕，屏幕都會跳轉到頁面頂部。這是什麼，我該如何讓它停止？ Here's my source code.爲什麼打開CSS彈出窗口時頁面會滾動到頂部？
<!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>
瀏覽器正在尋找一個元素與popup1的ID（...） – jeff
三明治菜單就是有popup1 ID – arsilhavy