堆栈内存溢出
  繁体   English   中英

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

[英]How to fix 'Jquery Smooth Scroll Animation' Not Working On Bootstrap

 原文  2019-04-23 10:22:05  5   1    javascript/ jquery/ twitter-bootstrap

问题描述


  
 
  
  
  
 
   
 
    
    <!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 个解决方案

解决方案1
 0 已采纳  2019-04-23 10:41:44

你忘了包含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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Jquery平滑滚动动画无法正常工作 用Waypoint平滑滚动jquery（animation） Jquery“Smooth Scroll”不起作用 如何通过导航栏的高度更改平滑滚动JQuery动画的偏移量 如何修复jQuery滚动顶部动画？ jQuery Smooth Scroll在网页中不起作用 jQuery滚动动画不起作用 如何在单击jQuery上平滑滚动 如何在纯javascript中添加平滑滚动animation？ jQuery动画速度不起作用？ 动画瞬间 - 不流畅
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM