[英]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.