文章/答案/技术大牛

发布

社区首页 >问答首页 >SmoothScroll nav不适用于bootstrap 4

问SmoothScroll nav不适用于bootstrap 4
EN

Stack Overflow用户

提问于 2019-02-15 21:12:30

回答 2查看 898关注 0票数 2

我使用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代码，但它应该可以工作，在我看来，我一直在以正确的方式添加它。

javascript

html

css

navbar

smooth-scrolling

回答 2

Stack Overflow用户

发布于 2019-05-16 22: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“即可。

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

票数 1

Stack Overflow用户

发布于 2019-02-15 22: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");
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54710109

复制

相似问题

问SmoothScroll nav不适用于bootstrap 4
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SmoothScroll nav不适用于bootstrap 4EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SmoothScroll nav不适用于bootstrap 4
EN