当我点击" home"时,锚点跳转到home
按钮不起作用,这是我的代码:
<header>
<div id="header_container">
<div class="menuLogo">
<img id="logo" />
</div>
<a href="#home"><div class="menuItem">Home</div></a>
<div class="menuItem">Over</div>
<div class="menuItem">Contact</div>
<div id="mobile_menu_button"></div>
</div>
</header>
<div id="body_container">
<div id="banner_container">
<img id="banner" />
</div>
<div name="home" id="content_container">
<div id="home_container"></div>
</div>
</div>
* {
padding: 0;
margin: 0 auto;
}
body {
background: rgb(223,227,238);
text-align: center;
}
header {
min-width: 100%;
background: rgb(50,50,50);
height: 80px;
position: fixed;
z-index: 10;
}
#header_container {
max-width: 1024px;
height: 100%;
}
#header_container div {
float: left;
display: inline-block;
width: 25%;
}
#logo {
width: 50%;
height: auto;
}
.menuItem {
padding-top: 29px;
height: calc(100% - 29px);
border: 0;
text-align: center;
font-family: Signika;
font-size: 25px;
color: rgb(203,207,218);
}
.menuItem:hover {
border-bottom: 4px solid rgb(59,89,202);
height: calc(100% - 33px);
color: rgb(160,170,218);
}
.menuLogo {
padding-top: 14.5px;
height: calc(100% - 14.5px);
border: 0;
text-align: center;
}
#mobile_menu_button {
display: none;
}
#body_container {
padding-top: 80px;
}
#banner_container {
position: fixed;
left: 0;
right: 0;
}
#banner {
width: 1024px;
height: auto;
}
#content_container {
background: rgb(235,235,240);
max-width: 1024px;
height: 100%;
position: relative;
top: 300px;
}
#home_container {
width: 100%;
min-height: 100px;
height: 1000px;
}
代表JSFiddle
答案 0 :(得分:3)
锚点使用ID。如果你想要一个锚点让你跳到家里,你必须在某些东西上添加id="home"
而不是name="home"
!
所以将你的div改为
<div id="home">
而不是
<div name="home">