滚动到easing不适用于无限js。滚动到容易与无限js冲突

Question

请在两个页面查看源代码。

在此页面：_p1.html这是“第1页”在浏览器右侧使用滚动条一路向下滚动到页面底部。将出现“第2页”。我正在使用无限滚动js。

我也使用滚动来定位点与缓动。再次返回页面顶部：_p1.html点击“向下滚动到项目A”使用缓动向下滚动到页面中间。现在，向下滚动更多。负载。大。现在，点击“向下滚动到项目B”。项目B只是跳到中间页面，它应该用easing滚动。

出了什么问题？我该如何解决？

如果你直接去这里第2页：_p2.html点击项目B.你会看到，宽松的作品。但是当页面1和无限js时，缓动滚动不起作用。

出了什么问题？我该如何解决？

js的滚动在页面加载时触发，并且当新内容加载到页面时不再运行。因此，对于加载到页面中的任何其他内容（page2，page3等），滚动效果不起作用。我们需要找到一种方法来在新内容被引入并加载到页面中时重新触发javascript。

Answer 1

您可以将事件处理程序附加到父，在这种情况下，我使用的$（document），但要避免过多的开销，使用最近的父母，然后告诉jQuery来只泡了事件” .page-滚动'。这样，如果有任何新元素被添加到具有类page-scroll的文档中，该事件也将附加到它们。

$(function() { 
    $(document).on('click', '.page-scroll', function(e) { 
     e.preventDefault(); 
     var $anchor = $(e.target); 
     $('html, body').stop().animate({ 
      scrollTop: $($anchor.attr('href')).offset().top 
     }, 2500, 'easeInOutExpo'); 
    }); 
}); 

编辑

要在你的情况这工作该脚本可以被包含不止一次，你必须确保只加载了jQuery，引导和jasny一次，然后包裹休息在window.onload事件处理程序中的脚本。因为窗口只加载一次，如果脚本在窗口加载后被包含，它将不会被执行。

我还降低了包括jQuery的渐变效果，只包括easeInOutExpo这是你正在使用你的函数缓解。

每一页的更换脚本所有与下面的脚本。

<script> 
 
if (typeof jQuery == 'undefined') { 
 
    var newJQuery = document.createElement('script'); 
 
    newJQuery.type = 'text/javascript'; 
 
    newJQuery.src = 'https://code.jquery.com/jquery-2.1.1.min.js'; 
 
    document.body.appendChild(newJQuery); 
 
    window.jQueryInterval = window.setInterval(function(){ 
 
     if(typeof jQuery != 'undefined') { 
 
      window.clearInterval(window.jQueryInterval); 
 
      var newBootstrap = document.createElement('script'); 
 
      newBootstrap.type = 'text/javascript'; 
 
      newBootstrap.src = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'; 
 
      document.body.appendChild(newBootstrap); 
 
      var newJasny = document.createElement('script'); 
 
      newJasny.type = 'text/javascript'; 
 
      newJasny.src = 'https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js'; 
 
      document.body.appendChild(newJasny); 
 
      /****************************************** 
 
       Infinite jQuery Scroll 
 
       @author Fabio Mangolini 
 
       http://www.responsivewebmobile.com 
 
      ******************************************/ 
 
      //location.href = 'index.html#start'; 
 
      var pages = []; //key value array that maps the pages. Ex. 1=>page2.html, 2=>page3.html 
 
      var current = 0; //the index of the starting page. 0 for index.html in this case 
 
      var loaded = []; //key value array to prevent loading a page more than once 
 
      //get all the pages link inside the #pages div and fill an array 
 
      $('#pages a').each(function(index) { 
 
       pages[index] = $(this).attr('href'); 
 
       loaded[$(this).attr('href')] = 0; //initialize all the pages to be loaded to 0. It means that they are not yet been loaded. 
 
      }); 
 
      //on scroll gets when bottom of the page is reached and calls the function do load more content 
 
      $(window).scroll(function() { 
 
       //Not always the pos == h statement is verified, expecially on mobile devices, that's why a 300px of margin are assumed. 
 
       if ($(window).scrollTop() + $(window).height() >= $(document).height() - 300) { 
 
        console.log("bottom of the page reached!"); 
 
        //in some broswer (es. chrome) if the scroll is fast, the bottom 
 
        //reach events fires several times, this may cause the page loaging 
 
        //more than once. To prevent such situation every time the bottom is 
 
        //reached the number of time is added to that page in suach a way to call 
 
        //the loadMoreContent page only when the page value in "loaded" array is 
 
        //minor or equal to one 
 
        loaded[pages[current + 1]] = loaded[pages[current + 1]] + 1; 
 
        if (loaded[pages[current + 1]] <= 1) 
 
         loadMoreContent(current + 1); 
 
       } 
 
      }); 
 
      //loads the next page and append it to the content with a fadeIn effect. 
 
      //Before loading the content it shows and hides the loaden Overlay DIV 
 
      function loadMoreContent(position) { 
 
       //try to load more content only if the counter is minor than the number of total pages 
 
       if (position < pages.length) { 
 
        $('#loader').fadeIn('slow', function() { 
 
         $.get(pages[position], function(data) { 
 
          $('#loader').fadeOut('slow', function() { 
 
           $('#scroll-container').append(data).fadeIn(999); 
 
           current = position; 
 
          }); 
 
         }); 
 
        }); 
 
       } 
 
      } 
 
      jQuery.extend(jQuery.easing, { 
 
       easeInOutExpo: function(e, f, a, h, g) { 
 
        if (f === 0) { 
 
         return a; 
 
        } 
 
        if (f === g) { 
 
         return a + h; 
 
        } 
 
        if ((f /= g/2) < 1) { 
 
         return h/2 * Math.pow(2, 10 * (f - 1)) + a; 
 
        } 
 
        return h/2 * (-Math.pow(2, -10 * --f) + 2) + a; 
 
       } 
 
      }); 
 
      /*jQuery to collapse the navbar on scroll 
 
      $(window).scroll(function() { 
 
       if ($(".navbar").offset().top > 50) { 
 
        $(".navbar-fixed-top").addClass("top-nav-collapse"); 
 
       } else { 
 
        $(".navbar-fixed-top").removeClass("top-nav-collapse"); 
 
       } 
 
      }); 
 
      */ 
 
      //jQuery for page scrolling feature - requires jQuery Easing plugin 
 

 
      $(document).on('click', '.page-scroll', function(e) { 
 
       var $anchor = $(this); 
 
       $('html, body').stop().animate({ 
 
        scrollTop: $($anchor.attr('href')).offset().top 
 
       }, 2500, 'easeInOutExpo'); 
 
       e.preventDefault(); 
 
      }); \t 
 
\t  } 
 
    },1); 
 
}; 
 
</script>