【发布时间】：2019-01-31 11:08:20
【问题描述】：
我正在制作一个带有导航栏的网站。单击导航栏中的项目时，它应该滚动到特定的 div。但它滚动到 div 的底部而不是顶部。
我找不到错误，谁能帮帮我？
欢迎任何帮助。
我的代码：
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #10171e;
color: white;
}
img{
width: 100%;
}
.header {
margin-bottom: 100px;
position: fixed;
width: 100%;
overflow: hidden;
background-color: #15202b;
padding: 20px 10px;
}
.header a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header-right {
float: left;
}
.home{
/*margin-bottom: 500px;*/
}
.about{
background: red;
/*height: 1000px;*/
/*margin-top: 500px;*/
/*margin-bottom: 500px;*/
width: 60%;
margin-left: 20%;
}
.contact{
background-color: blue;
height: 1000px;
/*margin-top: 500px;*/
/*margin-bottom: 500px;*/
width: 60%;
margin-left: 20%;
}
}
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<title>Jurjen</title>
</head>
<body>
<div class="home">
<div class="header">
<a class="nav" href="#" id="home">Home</a>
<a class="nav" href="#" id="about">About</a>
<a class="nav" href="#" id="contact">Contact</a>
</div>
<img src="img/programmer1.png" alt="programmer">
<a id="button" class="arrow bounce" href="#"></a>
</div>
<div class="about">
<p class="P1">Waarom gebruiken we het? Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke).</p>
</div>
<div class="contact">
<p>Waarom gebruiken we het?Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke).
</p>
</div>
</body>
<footer></footer>
</html>
<script type="text/javascript">
$("#button").click(function() {
$('html,body').animate({
scrollTop: $(".P1").offset().top},
'slow');
});
$("#home").click(function() {
$('html,body').animate({
scrollTop: $(".home").offset().top},
'slow');
});
$("#about").click(function() {
$('html,body').animate({
scrollTop: $(".about").offset().top},
'slow');
});
$("#contact").click(function() {
$('html,body').animate({
scrollTop: $(".contact").offset().top},
'slow');
});
</script>如您所见。当您单击导航按钮时，它会滚动但不会滚动到 div 的顶部，它会滚动到 div 的中间。这是什么原因？
【问题讨论】：
标签： javascript jquery html css