I'm using a single page scroll with dot navigation which works perfectly, but cannot work with a header navigation. I'm using the script from https://github.com/fabeat/responsive-fullpage-scroll in a bootstrap 5.3 page and the script creates an object as follows:
document.addEventListener("DOMContentLoaded", function() {
var wrap = document.getElementById('wrap');
var fps = new FullPageScroll(wrap);
var indicator = document.createElement('div');
indicator.id = 'indicator';
var slideIndicators = [];
fps.slides.forEach(function(slide, index){
var slideIndicator = document.createElement('div');
slideIndicator.onclick = function() {
fps.goToSlide(index);
}
if (index === fps.currentSlide) {
slideIndicator.className = "active";
}
indicator.appendChild(slideIndicator);
slideIndicators.push(slideIndicator);
});
document.body.appendChild(indicator);
fps.onslide = function() {
slideIndicators.forEach(function(slideIndicator, index) {
if (index === fps.currentSlide) {
slideIndicator.className = "active";
} else {
slideIndicator.className = "";
}
});
}
fps.addEventListener('slide', function(e) {
console.log("Slide "+(e.target.currentSlide+1)+" of "+e.target.slides.length);
console.log
});
});
What I figured is that I should probably not use the a tag in the bootstrap header navigation and instead run an onclick function similar to this:
<li style="margin-top:10px;"><a class="dropdown-item" href="#" onclick="someFunction(); return false;"><strong>Vision</strong></a></li>
The FullPageScroll Object fps has a goToSlide() method that should be usable here but for the life of me, I don't know how to write this function that can access fps.goToSlide(index). I keep getting an error of a function that is not defined.
If I do not use this specific object, the dot navigation breaks and disappears until I reload the page so whatever page scroll link I use in my Nav needs to use this object.