gpt4 book ai didi

javascript - 单页网站 anchor 名称链接到页面顶部不会转到页面顶部

转载 作者:行者123 更新时间:2023-11-28 18:35:47 25 4
gpt4 key购买 nike

我有一个简单的单页网站,其中有一些带有命名链接的导航。其中一个链接指向一个 id 为“home”的 div,它位于 body 标签的右侧。 The goal of this link is to return to the top of the page, however, when selected the page is returned slightly below the top of the page (e.g. requires you to scroll slightly up).

已在 Chrome、Firefox 和 Safari 上确认。没有javascript这是不可能的吗?仅供引用:我使用 jsfiddle 进行了尝试,但没有遇到问题。

这是 html:

<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link href='http://fonts.googleapis.com/css?family=Cantata+One' rel='stylesheet' type='text/css'>
</head>

<body>
<div id="home">
<div id="nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#experiments">Experiments</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<h1>
<span id="i">i</span>
<span id="n">n</span>
<span id="c">c</span>
</h1>
<h2>
<span id="tagline">"angel investor, coder want-to-be, nikola tesla groupie."</span>
</h2>
</div>

<div id="experiments">
<span id="ex">ex</span>
<span id="amples">amples</span>
</div>
</body>

这是 CSS:

/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
REMOVED THIS PART OF THE CSS FOR BREVITY

/* Beginning of Custom CSS */

body {
background-image: url("straws.png");
}

@Font-face {
font-family: 'curly';
src: url('fonts/HoneyScript-Light.ttf') format('truetype');
}

/* Main Title & Tag Line */
#home{
height: 1000px;
}
h1 {
z-index: -100;
text-align: center;
margin-top: 10px;
text-align: center;
}
#i {
font-family: 'curly', serif;
color: orange;
font-size: 20em;
text-shadow: 3px 3px 7px #999;
}
#n {
font-family: courier;
color: black;
font-size: 10em;
text-shadow: 3px 3px 7px #999, -1px -1px -1px white, 1px 1px 0 #BBB;
}
#c {
font-family: 'curly', serif;
color: gray;
font-size: 5em;
text-shadow: 2px 2px 7px #999, -1px -1px -1px white, 1px 1px 0 #BBB;
}
h2 {
position: relative;
top: -50px;
text-align: center;
}
#tagline {
font-family: 'Cantata One' serif;
color: #666;
font-size: 2em;
}

/* Navigation */
#nav {
position: fixed;
margin-left: 45%;
font-family: 'arial';
font-size: 2em;
margin-top: 40px;
}
#nav li {
display: inline;
margin-right: 10px;
}
#nav li a {
color: grey;
text-decoration: none;
border: 2px solid black;
.webkit-box-shadow: 5px 5px 5px #777777;
box-shadow: 5px 5px 5px #777777;
padding: 5px;
}
#nav li a:hover {
color: black;
}

#experiments{
height: 1000px;
}
#ex {
font-family: 'curly', serif;
color: orange;
font-size: 20em;
text-shadow: 3px 3px 7px #999;
}
#amples {
font-family: courier;
color: black;
font-size: 10em;
text-shadow: 3px 3px 7px #999, -1px -1px -1px white, 1px 1px 0 #BBB;
}

最佳答案

不要显式设置#home 的高度,而是尝试使用 overflow: auto

#home{
overflow: auto;
}

关于javascript - 单页网站 anchor 名称链接到页面顶部不会转到页面顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12760571/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com