如何修复'Jquery Smooth Scroll Animation'不能在Bootstrap上工作

问题描述 投票：0回答：1




    <!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 -->
javascript jquery twitter-bootstrap
1个回答
0
投票

你忘了包含bootstrap 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.