SmoothScroll 导航不适用于 bootstrap 4答案

【问题标题】：SmoothScroll nav doesn't work with bootstrap 4SmoothScroll 导航不适用于 bootstrap 4
【发布时间】：2019-02-15 13:12:29
【问题描述】：

我使用 bootstrap 4 已经有一段时间了。看到了多次解释为什么平滑滚动应该工作，但我仍然找不到它！

也许有人可以解释为什么它对我不起作用？或者我的编码有什么问题？

伟大的，杰森

$(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 B.V.B.A</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 代码，但它应该可以工作，我认为我一直在以正确的方式添加它。

【问题讨论】：

去检查元素并复制粘贴控制台错误消息（如果有）？
我没有错误。这就是奇怪的部分。
HTML中没有.scroll，你的意思是.js-scroll-trigger吗？
我已经改变了它/用.js-scroll-trigger 尝试了它，但这似乎不起作用？
所以我已将其更改为.js-scroll-trigger，它不再执行任何操作，甚至连自己的链接也没有！进度，但某处出现错误。

标签： javascript html css navbar smooth-scrolling

【解决方案1】：

可以在这里找到答案：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

您使用的是 slim 版本（标准由 Bootstrap 提供），但 slim 版本没有动画功能。所以要修复它，只需从 https://code.jquery.com/jquery-3.3.1.slim.min.js 中删除“.slim”。

您还需要使用“.js-scroll-trigger”而不是“.scroll”，即使您也可以只使用“.nav-link”。

【讨论】：

【解决方案2】：

几乎所有浏览器都采用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");
});

【讨论】：

这打破了我的引导。我以前使用过 MDN，但存在一些严重的问题。我宁愿使用 Bootstrap 4 脚本/链接，因为我仍然可以处理不同的事情。
然后查看此链接stackoverflow.com/questions/49173297/…
java代码还是不行以前见过。和你给我的stackoverflow链接我之前检查过。但是，当我更改的每一个或任何内容似乎都没有做任何事情时，它甚至没有做任何事情，而是在某些时候给出了错误。好像没有在HTML代码中添加链接