请在两页上查看源代码。
在此页面上：_p1.html它是“第1页”使用浏览器右侧的滚动条一直向下滚动到页面底部。将出现“第2页”。我正在使用无限卷轴js。
我也使用滚动来缓和锚点。再次返回页面顶部：_p1.html单击“向下滚动到项目A”它向下滚动到页面中间并缓动。现在，向下滚动更多。加载。大。现在，点击“向下滚动到项目B”项目B只是在它应该用缓动滚动时跳转到中间页面。
有什么问题？我该如何解决这个问题？
如果你直接进入第2页：_p2.html点击第B项。你会看到缓和有效。但是当在第1页和无限js时，缓动滚动不起作用。
有什么问题？我该如何解决这个问题？
滚动到js会在页面加载时触发，并且在将新内容加载到页面时不会再次运行。因此，滚动效果不适用于加载到页面中的任何其他内容（第2页，第3页等）。我们需要找到一种方法来在引入新内容并将其加载到页面时重新触发javascript。
答案 0 :(得分：1)
您可以将事件处理程序附加到父级，在这种情况下我使用了$（文档）但是为了避免过多的开销使用最近的父级，然后告诉jQuery只将事件冒泡到＆＃39 ;。第涡卷＆＃39 ;.这样，如果将任何新元素添加到具有类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，bootstrap和jasny一次，然后将其余的脚本包装在window.onload事件中处理程序。因为窗口只加载一次，如果在加载窗口后包含脚本，它将不会被执行。
我还减少了包含的jquery缓动，只包含了easInOutExpo，这是你在函数中使用的缓动。
使用以下脚本替换每个页面上的所有脚本。
<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();
});
}
},1);
};
</script>