Removing anchor from url (fullPage.js)

Question

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

Answer 1

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