我遇到了一个问题，按钮没有将我滚动到锚的顶部，而是会滚动到部分(那是因为我的导航栏是固定的，并且与部分重叠(。
我用一些边距和填充来修复它，但我觉得有一个更好、更简单的解决方案。https://jsfiddle.net/HcJanni/2n9b0ohp/76/
我试了几个小时，但没能找到完美的解决方案，总是有问题，不起作用。
$(function() {
var shrinkHeader = 100;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if (scroll >= shrinkHeader) {
$('#navbar').addClass('shrink');
} else {
$('#navbar').removeClass('shrink');
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});
// JavaScript Document
$(document).ready(function() {
var navTop = $('#navbar').offset().top;
var navHeight = $('#navbar').height();
var windowH = $(window).height();
$('.section').height(windowH);
$(document).scroll(function() {
var st = $(this).scrollTop();
//for the nav bar:
if (st > navTop) {
$('#navbar').addClass('fix');
$('.section:eq(0)').css({
'margin-top': navHeight
}); //fix scrolling issue due to the fix nav bar
} else {
$('#navbar').removeClass('fix');
$('.section:eq(0)').css({
'margin-top': '0'
});
}
$('.section').each(function(index, element) {
if (st + navHeight > $(this).offset().top && st + navHeight <= $(this).offset().top + $(this).height()) {
$(this).addClass('active');
var id = $(this).attr('id');
$('a[href="#' + id + '"]').parent('li').addClass('active');
// or $('#nav li:eq('+index+')').addClass('active');
} else {
$(this).removeClass('active');
var id = $(this).attr('id');
$('a[href="#' + id + '"]').parent('li').removeClass('active');
//or $('#nav li:eq('+index+')').removeClass('active');
}
});
});
});
//
/* MAIN */
/* SECTION HOME */
#home {
height: 853px !important;
display: flex;
z-index: -1;
position: relative;
top: -128px;
padding-top: 128px;
}
#homebild {
width: 1280px;
height: 853px;
}
/* SECTION WIR-UEBER-UNS */
#wir-ueber-uns {
height: 853px !important;
display: flex;
top: -208px;
padding-top: 80px;
z-index: -2;
position: relative;
background-color: lightblue;
}
#wir-ueber-unsbild {
width: 1280px;
height: 853px;
}
/* SECTION AKTIONEN */
#aktionen {
height: 853px !important;
display: flex;
padding-top: 80px;
top: -288px;
z-index: -3;
position: relative;
background-color: darkblue;
}
#aktionenbild {
width: 1280px;
height: 853px;
}
/* SECTION TERMINVEREINBARUNG */
#terminvereinbarung {
height: 853px !important;
padding-top: 80px;
top: -368px;
display: flex;
z-index: -4;
position: relative;
background-color: red;
}
#terminvereinbarungbild {
width: 1280px;
height: 853px;
}
/* SECTION INFOS */
#infos {
height: 772px !important;
width: 1280px;
display: flex;
padding-top: 80px;
top: -448px;
z-index: -5;
position: relative;
background-color: darkblue;
}
/* MAIN ENDE */
<!DOCTYPE html>
<html>
<head>
<title>OptikTack</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="body">
<!-- NAVIGATION -->
<nav id="navbar">
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="javascript/navbar fixed.js"></script>
<a href="#home" id="logo"><img src="https://i.postimg.cc/przxCGcx/Logo.png" class="logo"></a>
<ul>
<li class="hvr-sweep-to-top active"><a href="#home">Home</a></li>
<li class="hvr-sweep-to-top"><a href="#wir-ueber-uns">Wir über uns</a></li>
<li class="hvr-sweep-to-top"><a href="#aktionen">Aktionen</a></li>
<li class="hvr-sweep-to-top"><a href="#terminvereinbarung">Terminvereinbarung</a></li>
<li class="hvr-sweep-to-top"><a href="#infos">Infos</a></li>
</ul>
</nav>
<!-- NAVIGATION ENDE -->
<!-- MAIN -->
<div id="spacer"></div>
<!-- home section -->
<section id="home" class="section">
<div>
<img src="https://i.postimg.cc/tgk5cWmx/Bild-1.jpg" alt="Frau" id="homebild" width="1280px">
</div>
</section>
<!-- home section ende -->
<!-- wir-ueber-uns section -->
<section id="wir-ueber-uns" class="section">
<div>
<img src="https://i.postimg.cc/FH6RSxbF/Bild-2.jpg" width="1280px" id="wir-ueber-unsbild">
</div>
</section>
<!-- wir-ueber-uns section ende -->
<!-- aktionen section -->
<div id="reference"></div>
<section id="aktionen" class="section">
<div>
<img src="https://i.postimg.cc/k5P0L6qF/Bild-5.jpg" width="1280px" id="aktionenbild">
</div>
</section>
<!-- aktionen section ende -->
<!-- terminvereinbarung section -->
<section id="terminvereinbarung" class="section">
<div>
<img src="https://i.postimg.cc/6q8b8tBp/Bild-9.jpg" width="1280px" id="terminverinbarungbild">
</div>
</section>
<!-- terminvereinbarung section ende -->
<!-- infos section -->
<section id="infos" class="section">
<div>
<p>section 5</p>
</div>
</section>
<!-- infos section ende -->
<!-- MAIN ENDE -->
因为这只是第一部分的问题，为什么不在单击主页时滚动到顶部呢？
$("a[href='#home']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});