Fullpage.js 和 turbolinks 集成（fullpage 不能正常工作）答案

【问题标题】：Fullpage.js and turbolinks integration (fullpage not works correctly)Fullpage.js 和 turbolinks 集成（fullpage 不能正常工作）
【发布时间】：2017-06-20 20:05:19
【问题描述】：

你好我正在尝试使用turbolinks和fullpage.js，首先我创建index.html并将这段代码插入到head标签中：

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="turbolinks.js?body=1"></script>
<script src="jquery.fullPage.min.js"></script>
<script>


$( document ).on('turbolinks:load', function() {
console.log("It works on each visit!")

	$('#fullpage').fullpage({
		anchors: ['firstPage', 'secondPage', '3rdPage'],
		sectionsColor: ['#191919', '#191919', '#191919'],
		responsiveHeight: 600,
		navigation: true,
							    	
		
		navigationPosition: 'right',	
		afterResponsive: function(isResponsive){
		}
	});
});
</head>
<body>
....my html code here ..
</body>

我还创建了第二页 demo_page.html 并将相同的头块插入到 html 代码中。在 demo_page.html 上，有一个指向 index.html (Testing) 的链接，当我单击链接时，它通过 turbolinks 加载 index.html，但没有整页功能（在控制台日志中，除了这个 fullPage 之外没有错误：Fullpage.js只能初始化一次，并且您正在执行多次！）当我刷新 index.html（通过 F5 浏览器）时，它正常加载了工作滚动部分和 Fullpage.js 的其他功能如何解决这个问题并且有人有一个 fullpage.js 和 turbolinks 集成的开放源代码项目？

【问题讨论】：

这完全是关于动态内容以及销毁和初始化 fullPage.js。首先，你确定你需要turbolinks吗？检查this topic。

标签： javascript jquery fullpage.js turbolinks

【解决方案1】：

由于错误状态，您不能多次初始化 fullPage.js。

每次加载包含新内容的新页面时，只需将其销毁并重新初始化即可。检查my answer here 了解更多信息。另外，请检查this topic in fullPage.js issues forum。

【讨论】：