ScrollTop-Dauer wird vom Skript nicht berücksichtigt

Ich habe einen Fehler in meinem Code.ScrollTop-Dauer wird vom Skript nicht berücksichtigt

Meine scrollTop funktioniert, aber nicht die Dauer Wirkung davon.

Ein Klick auf den Scroll-Link löst zwar die Änderung des Offsets aus, aber es erfolgt sofort statt mit der Dauer von 1000, die ich angegeben habe.

vielen Dank für zukünftige Hilfe ist Hier mein Code

<!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>

Quelle

2017-02-04 legylith

Ich versuchte dies, mein alle Artikel:

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'); 
    }); 
}

Quelle

2017-10-03 15:50:18 Jhaz

ScrollTop-Dauer wird vom Skript nicht berücksichtigt

Antwort

Verwandte Themen