我正在制作一个带有导航栏的网站。当点击导航栏中的项目时，它应该滚动到特定的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的中间。这是什么原因？