[英]Jquery scroll animation scrolles to bottom of div instead of top
我正在制作一个导航栏的网站。 单击导航栏中的项目时，它应滚动到特定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的中间。 这是什么原因？
问题是因为offset().top不考虑.header元素的高度，因此内容在其下面对齐。
为了解决这个问题简单地检索outerHeight()的.header和减去它offset().top 。
另请注意，您可以通过使用单个选择器检索它们来干掉多个单击处理程序，然后通过链接单击a元素的id来定向要滚动到a元素。 试试这个：
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>
JS平滑滚动，滚动到最终/底部div的底部而不是顶部
[英]JS Smooth scrolling, scroll to bottom of final / bottom div instead of top
jQuery-在Scroll上跟随div并停在指定的顶部或底部边距
[英]jQuery - Following div on Scroll that stops at specified top or bottom margin
jQuery OnMouseMove滚动div上/下，不是右/左，怎么样？
[英]jQuery OnMouseMove scroll div Top/Bottom, NOT right/left, how?
单击div时滚动到顶部，如果滚动在顶部，则滚动到底部
[英]scroll top when clicking on a div, then scroll bottom if scroll is on top
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.