I've been playing around with fullPage.js but I've come across this problem that I cannot solve.
In order to link to anchors inside my page, I inserted the following code from the fullPage.js FAQ:
new fullpage('#fullpage', {
anchors: ['firstPage', 'secondPage', 'thirdPage']
});
It works fine but as I scroll through the different sections, my url now goes from
www.example.com
to www.example.com/#secondPage
What I want to do is to remove #/secondPage
completely from the URL but just removing the hash will also suffice for me.
I've done some research and found out this is doable in both jQuery but should be done through the history API (which I still don't really understand what is), but I am not very experienced in JS let alone its libraries just yet and have no clue where to start.
Video demonstration of my problem:
https://www.youtube.com/watch?v=17syDii2buA&ab_channel=didurd1
The whole purpose of using the anchors
option is actually creating anchors on the URL when section changes. Those are used as "internal links" so you can then use them to also link to other parts of your page.
If you do not want them on the URL you'll have to completely remove the option anchors
from your fullPage.js initialization.
Then, if you need to make any internal link you'll have to use jQuery/JavaScript together with the fullPage.js method moveTo
. For example:
<a href="#" class="link" data-section="2" data-slide="1">Link here</a>
<a href="#" class="link" data-section="3">Link here</a>
$('.link').click(function(){
var sectionIndex = $(this).attr('data-section');
var slideIndex = $(this).attr('data-slide') || 0;
fullpage_api.moveTo(sectionIndex, slideIndex);
});
Demo online: https://codepen.io/alvarotrigo/pen/LYWpeGq