SmoothScroll導航不適用於bootstrap 4
[英]SmoothScroll nav doesn't work with bootstrap 4
問題描述
我已經使用引導程序4一段時間了。 看到了多個提示，為什么平滑滾動應該起作用，但我仍然看不到找到它！
也許有人可以解釋為什么它對我不起作用？ 還是我的編碼有什么問題？
傑森（Jason）
$(document).ready(function(){ let scroll_link = $('.scroll'); //smooth scrolling ----------------------- scroll_link.click(function(e){ e.preventDefault(); let url = $('body').find($(this).attr('href')).offset().top; $('html, body').animate({ scrollTop : url },700); $(this).parent().addClass('active'); $(this).parent().siblings().removeClass('active'); return false; }); });
.masthead { height: 100vh; min-height: 500px; background-image: url('https://source.unsplash.com/BtbjCFUvBXs/1920x1080'); background-size: cover; background-position: center; background-repeat: no-repeat; } #page-content { flex: 1 0 auto; } #sticky-footer { flex-shrink: none; } header { padding: 156px 0 100px; } section { padding: 150px 0; }
<!DOCTYPE html> <html> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!--BOOTSTRAP--> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <!-- COSTUM STYLE.CSS --> <link href="Home.css" rel="stylesheet" type="text/css"/> <title>Iterms Group Europe BVBA</title> </head> <body> <body id="page-top"> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-light bg-light shadow fixed-top"> <div class="container"> <a class="navbar-brand js-scroll-trigger" href="#page-top">Iterms Group</a> <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#Home">Home</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#Voordelen">Voordelen</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#Administratie">Administratie</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#DebiteurenBeheer">Debiteuren Beheer</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#Contact">Contact</a> </li> </ul> </div> </div> </nav> <header id="Home" class="masthead"> <div class="container h-100"> <div class="row h-100 align-items-center"> <div class="col-12 text-center"> <h1 style="font-weight: 800;">Administratiekantoor</h1> <p style="font-weight: 600;">voor bedrijven en particulieren</p> <br> <br> <p>Welkom Iterms Group Europe is een administratiekantoor die U als ondernemer veel werk uit handen kan nemen. Als ondernemer wilt U niets liever dan bezig zijn met uw bedrijf . Maar voor uw bedrijfsvoering heeft U een goede administratie nodig. Op zelfstandige basis staan wij U ten dienste en kunnen wij U helpen met uw administratie, debiteurenbeheer, enz… Ook voor tijdelijke werkzaamheden helpen wij U graag voor het wegwerken van achterstanden in uw administratie bij langdurige ziekte of zwangerschapsverlof. Iterms Group Europe werkt met flexibele uren in het bedrijf van de klant of vanuit onze maatschappelijke zetel op de Fazantenstraat 122 te As.</p> </div> </div> </div> </header> <section id="Voordelen" class="bg-dark"> <div class="container"> <div class="row"> <div class="col-lg-4"> <a href="#"> <img class="img-fluid" src="http://placehold.it/400x400" alt=""> </a> </div> <div class="col-lg-8 mx-auto"> <h2 style="color: mintcream">Voordelen</h2> <p style="color: mintcream" class="lead">Zit U met de volgende vragen en problemen zoals, ik heb nog veel werk en moet nog:</p> <p style="color: mintcream">Offertes maken en versturen of mijn facturen maken.</p> <p style="color: mintcream">Nakijken of de klanten al betaald hebben en een aanmaning sturen.</p> <p style="color: mintcream">Moet ik met deze klant verdere stappen ondernemen?</p> <p style="color: mintcream">Nakijken waarom ik een aanmaning heb ontvangen en nog betalingen doen.</p> <p style="color: mintcream">Is mijn personeel op tijd betaald?</p> <p style="color: mintcream">Mijn personeel is ziek, wat nu?</p> </div> </div> </div> </section> <section id="Administratie" class="bg-light"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto"> <h2>Administratie</h2> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p> </div> <div class="col-lg-4"> <a href="#"> <img class="img-fluid" src="http://placehold.it/400x400" alt=""> </a> </div> </div> </div> </section> <section id="DebiteurenBeheer" class="bg-dark"> <div class="container"> <div class="row"> <div class="col-lg-4"> <a href="#"> <img class="img-fluid" src="http://placehold.it/400x400" alt=""> </a> </div> <div class="col-lg-8 mx-auto"> <h2 style="color: mintcream">Debiteuren beheer</h2> <p style="color: mintcream" class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p> </div> </div> </div> </section> <section id="Contact" class="bg-light"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto"> <h2>Contact</h2> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p> </div> <div class="col-lg-4"> <a href="#"> <img class="img-fluid" src="http://placehold.it/400x400" alt=""> </a> </div> </div> </div> </section> <!-- Footer --> <footer class="py-5 bg-dark"> <div class="container"> <p class="m-0 text-center text-white">Copyright © Iterms Group Bvba</p> <p class="m-0 text-center text-white">Website created by Jason Lommelen</p> </div> </footer> <!-- Custom JavaScript for this theme --> <script src="Js/SmoothScroll.js" type="text/javascript"></script> </body> <!-- BOOTSTRAP SCRIPTS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> </html>
第一行是我的JavaScript代碼，第二行是我的CSS代碼，最后一行是我的HTML代碼，但是它應該可以工作，我認為我一直在以正確的方式添加它。
2 個解決方案
解決方案1
0 2019-02-15 14:24:30
幾乎所有瀏覽器都采用scroll-behavior: smooth; 您可以檢查MDN，因此不再需要使用JS
來自MDN的引文
a { display: inline-block; width: 50px; text-decoration: none; } nav, scroll-container { display: block; margin: 0 auto; text-align: center; } nav { width: 339px; padding: 5px; border: 1px solid black; } scroll-container { display: block; width: 350px; height: 200px; overflow-y: scroll; scroll-behavior: smooth; } scroll-page { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 5em; }
<nav> <a href="#page-1">1</a> <a href="#page-2">2</a> <a href="#page-3">3</a> </nav> <scroll-container> <scroll-page id="page-1">1</scroll-page> <scroll-page id="page-2">2</scroll-page> <scroll-page id="page-3">3</scroll-page> </scroll-container>
你也可以做這樣的事情
$(document).ready(function () {
$('html, body').animate({
scrollTop: $('#today').offset().top - 50
}, 800, "easeOutCubic");
});
解決方案2
0 2019-05-16 14:24:09
答案可以在這里找到：
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
您使用的是苗條版本（通常由Bootstrap提供），但苗條版本沒有動畫功能。 因此，要解決此問題，只需從https://code.jquery.com/jquery-3.3.1.slim.min.js刪除“ .slim”。
同樣，即使您也可以只使用“ .nav-link”，也需要使用“ .js-scroll-trigger”而不是“ .scroll”。
Smoothscroll 不適用於 Chrome，但適用於其他瀏覽器
[英]Smoothscroll doesn't work in chrome but works in other browsers
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.