脚本没有遵守ScrollTop持续时间

我的scrollTop工作，但不是它的持续时间效果。

点击滚动链接确实会触发偏移量的变化，但它是立即完成的，而不是我给它的持续时间1000。

感谢很多帮助未来，这里是我的代码

<!DOCTYPE html> 
<head> 

<body class="demo-2"> 

    <main> 
     <header class="codrops-header"> 
      <div class="logo"> 
       <img src="img/logo.png" alt="LOGO" style="width: 100%; height: auto;"> 
       <h1 style="text-align: center;">Votre Fleuriste à Montmartre</h1> 
      </div>    
     </header> 
     <!-- Initial markup --> 
     <div class="segmenter" style="background-image: url(img/MUSE-01-BIS1.jpg)">    
     </div> 

     <h2 class="trigger-headline trigger-headline--hidden"><span>m</span><span>u</span><span>s</span><span>e</span></h2> 
     <div class="bottom-nav"> 
      <button class="btn btn--trigger">Voir plus</button> 
     </div> 

     <div class="scroll-to scroll-hidden"> 

     </div> 

     <div class="infos infos-hidden" id="infos"> 

      <div class="infos-container"> 

      </div> 
     </div> 

    </main> 



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="js/anime.min.js"></script> 
    <script src="js/imagesloaded.pkgd.min.js"></script> 
    <script src="js/main.js"></script> 
    <script> 
    $(document).ready(function() { 
     var headline = document.querySelector('.trigger-headline'), 
      trigger = document.querySelector('.btn--trigger'), 
      header = document.querySelector('.codrops-header'), 
      infos = document.querySelector('.infos'), 
      scroll = document.querySelector('.scroll-to'), 
      segmenter = new Segmenter(document.querySelector('.segmenter'), { 
       pieces: 4, 
       animation: { 
        duration: 1500, 
        easing: 'easeInOutExpo', 
        delay: 100, 
        translateZ: 100 
       }, 
       parallax: true, 
       positions: [ 
        {top: 0, left: 0, width: 45, height: 45}, 
        {top: 55, left: 0, width: 45, height: 45}, 
        {top: 0, left: 55, width: 45, height: 45}, 
        {top: 55, left: 55, width: 45, height: 45} 
       ], 
       onReady: function() { 
        trigger.classList.remove('btn--hidden'); 
        trigger.addEventListener('click', function() { 
         segmenter.animate(); 
         headline.classList.remove('trigger-headline--hidden'); 
         header.classList.add('hidden-header'); 
         scroll.classList.remove('scroll-hidden'); 
         $('.scroll-to').html('<a href="#infos">Scroll</a>'); 
         infos.classList.remove('infos-hidden'); 
         infos.classList.add('infos-flex'); 
         header.classList.remove('codrops-header'); 
         this.classList.add('btn--hidden'); 
        }); 
       } 
      }); 


     $('a[href*="#"]:not([href="#"])').click(function() { 
      if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 
      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
      if (target.length) { 
       $('html, body').animate({ 
       scrollTop: target.offset().top 
       }, 1000); 
       return false; 
      } 
      } 
     }); 
    }); 

    </script> 

    <script> 

    </script> 

</body>

来源

2017-02-04 legylith

我试过这个，我所有的项目：

scrollToWeb: function() 
{ 
    var objectScroll = $(".scrollToWeb"); 

    if(objectScroll.length <= 0) return false; 

    $(".scrollToWeb").click(function(e){ 
     e.preventDefault(); 
     var objectHref = $(this).attr("href").replace(strHOST , ''), 
      objectId = $(this).attr("id"); 

     if($('#'+objectId).length <= 0) return true; 

     $('#'+objectId).addClass('active'); 

     var target = objectHref, 
     $target = $(target); 

     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top 
     }, 1500, 'swing'); 
    }); 
}

来源

2017-10-03 15:50:18 Jhaz

脚本没有遵守ScrollTop持续时间

回答

相关问题