我正在制作一个网站导航栏.单击导航栏中的项目时,应滚动到特定的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的中间.是什么原因呢？
解决方法:
问题是因为offset().top不考虑.header元素的高度,所以内容在其下方对齐.
要解决此问题,只需检索.header的externalHeight()并将其从offset().top中减去.
还要注意,您可以通过使用单个选择器将所有单击处理程序全部干燥,然后将所有单击处理程序的ID链接起来,然后将其定位到要滚动的元素.尝试这个：
var navHeight = $('.header').outerHeight();$(".header a").click(function() { $('html,body').animate({ scrollTop: $("." this.id).offset().top - navHeight }, 'slow');});* { 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; }}<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script><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>联系客服
