如何修复“Jquery 平滑滚动动画”在 Bootstrap 上不起作用

Posted

技术标签:

【中文标题】如何修复“Jquery 平滑滚动动画”在 Bootstrap 上不起作用【英文标题】：How to fix 'Jquery Smooth Scroll Animation' Not Working On Bootstrap 【发布时间】：2019-09-12 12:19:12 【问题描述】： 



    <!doctype html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <title>home</title>
      </head>
      <body>

         <div class="container">
             <nav class="navbar fixed-top navbar-light bg-light mb-3 navbar-expand-sm mb-3 " id="main-nav">
                 <div class="container">
                     <a href="#" class="navbar-brand">Clickfix</a>
                 
                 <ul class="navbar-nav">
                     <li class="nav-item"><a class="nav-link" href="#home">Welcome</a></li>
                     <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
                     <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
                 </ul>
             </nav>
            </div>
          </div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <div class="container">

            <!--Home-->
            <section>
                <div id="home"></div>
                <br>
                <br>
                <br>
                <br>
            <h2 class="h2 text-center">Home</h2>
            <p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde.
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
             
              </p>
            </section>
<!-- Pragarph-->

            <section >
              <div id="about"></div>
              <br>
              <br>
              <br>
              <br>
              <h2 class="h2 text-center">About</h2>
            <p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde.
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus desert optio molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              Alteration literature to or an sympathize mr imprudence. Of is ferrars subject as enjoyed or tedious cottage. Procuring as in 
              resembled by in 
              agreeable. Next long no gave mr eyes. Admiration advantages no he celebrated so pianoforte unreserved. Not its herself forming
               charmed amiable. Him why feebly expect future now. As absolute is by amounted repeated entirely ye returned. These ready timed 
               enjoy might sir yet one since. Years drift never if could forty being no. On estimable dependent as suffering on my. Rank it long 
               have sure in room what as he. Possession travelling sufficient yet our. Talked vanity looked in to. Gay perceive led believed
                endeavor. Rapturous no of estimable oh, therefore, direction up. Sons the ever not fine like eyes all sure. 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde

              </p>
              </section>
<!-- Pragarph-->

              <section>
                  <div id="contact"></div>
                  <br>
                  <br>
                  <br>
                  <br>

              <h2 class="h2 text-center ">Contact</h2>
            <p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde.
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio 
              molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde

              </p>
              </section>

         </div>

        <!-- Optional javascript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="h

<!-- begin snippet: js hide: false console: true babel: false -->





ttps://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script>



          $('body').scrollspy(target:'#main-nav');


           $('#main-nav a').on('click',function(e)


            if(this.hash !== '')
              **Prevent default Behaviour**

              e.preventDefault();
             **Store hash**

              const hash = this.hash;

              //Animate Smooth Scroll
              $(' html , body').animate(
                scrollTop: $(hash).offset().top
              ,900, function()
                window.location.hash = hash;
              );

            


           );



        </script>
      </body>
    </html>
       **this is the code **

<!-- end snippet -->

【问题讨论】：

【参考方案1】：

您忘记包含引导 js 文件，

<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>

请检查以下代码，

 $('body').scrollspy(
        target: '#main-nav'
    );


    $('#main-nav a').on('click', function(e) 


        if (this.hash !== '') 

            e.preventDefault();

            const hash = this.hash;

            //Animate Smooth Scroll
            $(' html , body').animate(
                scrollTop: $(hash).offset().top
            , 900, function() 
                window.location.hash = hash;
            );

        


    );
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>home</title>
</head>

<body>

    <div class="container">
        <nav class="navbar fixed-top navbar-light bg-light mb-3 navbar-expand-sm mb-3 " id="main-nav">
            <div class="container">
                <a href="#" class="navbar-brand">Clickfix</a>

                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link" href="#home">Welcome</a></li>
                    <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
                </ul>
        </nav>
    </div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="container">

        <!--Home-->
        <section>
            <div id="home"></div>
            <br>
            <br>
            <br>
            <br>
            <h2 class="h2 text-center">Home</h2>
            <p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde.
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde

            </p>
        </section>
        <!-- Pragarph-->

        <section>
            <div id="about"></div>
            <br>
            <br>
            <br>
            <br>
            <h2 class="h2 text-center">About</h2>
            <p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde.
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus desert optio molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                Alteration literature to or an sympathize mr imprudence. Of is ferrars subject as enjoyed or tedious cottage. Procuring as in
                resembled by in
                agreeable. Next long no gave mr eyes. Admiration advantages no he celebrated so pianoforte unreserved. Not its herself forming
                charmed amiable. Him why feebly expect future now. As absolute is by amounted repeated entirely ye returned. These ready timed
                enjoy might sir yet one since. Years drift never if could forty being no. On estimable dependent as suffering on my. Rank it long
                have sure in room what as he. Possession travelling sufficient yet our. Talked vanity looked in to. Gay perceive led believed
                endeavor. Rapturous no of estimable oh, therefore, direction up. Sons the ever not fine like eyes all sure.
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde

            </p>
        </section>
        <!-- Pragarph-->

        <section>
            <div id="contact"></div>
            <br>
            <br>
            <br>
            <br>

            <h2 class="h2 text-center ">Contact</h2>
            <p class="lead">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde.
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo dolore eum modi, temporibus deserunt optio
                molestiae iure iusto ipsam quisquam reiciendis veritatis assumenda! Vitae excepturi quas, debitis nulla doloremque unde

            </p>
        </section>

    </div>
    <script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>
</body>

</html>

【讨论】：

以上是关于如何修复“Jquery 平滑滚动动画”在 Bootstrap 上不起作用的主要内容，如果未能解决你的问题，请参考以下文章

重新打包 Spring Boot Jar 时如何修复压缩错误

如何修复 Spring Boot 数据 jpa UnsatisfiedDependencyException

如何修复 Spring Boot + Vue 应用程序中损坏的 CORS？

如何使用 Spring Boot Security 修复 Spring Boot Webflux 应用程序中的“名称为 requestMappingHandlerAdapter 的 bean 定义无效

如何在 Spring Boot 中修复“嵌套异常是 java.lang.ArrayIndexOutOfBoundsException：索引 2 超出长度 2 的范围” - postgresql 项目

如何修复不兼容的外键约束spring boot