Fullpage.js: Anchors without hash?

[ZetCoby]

Is it possible to use navigation without hash in the URL and use the browser history instead?

[alvarotrigo]

Yeah sure. Just don't use any data-anchor attribute in your sections and get rid of the anchors option as in this example.

However, you can block the anchors for browser history but still using them in your page for direct access to sections or slides, for callbacks or even for aesthetics.
Check the option lockAnchors in the docs:

lockAnchors: (default false). Determines whether anchors in the URL will have any effect at all in the plugin. You can still using anchors internally for your own functions and callbacks, but they won't have any effect in the scrolling of the site. Useful if you want to combine fullPage.js with other plugins using anchor in the URL.

You can even lock them dynamically with setLockAnchors as you can see in this other demo.

[alvarotrigo]

is this posible??

Nop.

[krishna-shah]

@alvarotrigo
Hello.
use lockAnchors: true if you are using data-anchor and want to hide #code from url.
Thank You so much its saves my time.

[alvarotrigo]

want to hide #code from url.

You mean you want to remove the character # from your URL? Or the whole #anchor ?
Add an example of the URL you want.

[krishna-shah]

@alvarotrigo

Hello,

http://dev.saucacollection.com/#collection
and I want http://dev.saucacollection.com

I was using data-anchor that's why when page scroll down URL will be change with # code and I don't want # code display in URL.

lockAnchors: true this argument remove #code from the url.

so my issue is short out now.

[hdkcreative]

hi ! @alvarotrigo alvarotrigo , i have ...

<ul id="menu">
    <li data-menuanchor="firstPage/Test1"><a href="#firstPage/Test1">First lide</a></li>
    <li data-menuanchor="secondPage/Test2"><a href="#secondPage/Test2">Second slide</a></li>
    <li data-menuanchor="3rdPage/Test3"><a href="#3rdPage/Test3">Third slide</a></li>
</ul>

<div id="fullpage">
    <div class="section " id="section0" data-anchor="firstPage/Test1">
        <h1>fullPage.js</h1>
        <p>Configure the scrolling speed!</p>
        <img src="imgs/fullPage.png" alt="fullPage" />
    </div>
    <div class="section" id="section1" data-anchor="secondPage/Test2">
        <div class="slide">
            <div class="intro">
                <img src="imgs/1.png" alt="Cool" />
                <h1>Slow scrolling speed</h1>
                <p>In case we want to make a site for old people, for example :)</p>
            </div>
        </div>
        <div class="slide">
            <div class="intro">
                <img src="imgs/2.png" alt="Compatible" />
                <h1>Landscape too</h1>
                <p>Also applied to landscape slides. Great uh?</p>
            </div>
        </div>
    </div>
    <div class="section" id="section2" data-anchor="3rdPage/Test3">
        <div class="intro">
            <h1>Slooooooww</h1>
            <p>Now you can try other demos!</p>
        </div>
    </div>
</div>


in my URL i want ( if this is possible) 
www.mydomain.com/#firstPage/Test1
www.mydomain.com/#secondPage/Test2
and 
www.mydomain.com/#3rdPage/Test3


what do you Think? ,    in this case (  is possible ),  what are the change  ?

disable bodyclass() ?  delete the replace in  windows.location ...

you can help me please ? , ,, , any ideas ?

[asofiane82]

Hi every one , i've a little question
i know that i can hide anchors with lockAnchors: true,
but, is there a way to hide anchors from url and keep them running when i click a the slide button ?

[alvarotrigo]

Why not using lockAnchors?

[asofiane82]

Hi alvaro, lockAnchors hide correctly anchors on url but makes data-anchors click unusable :(

[alvarotrigo]

@asofiane82 then the answer is no. You can not keep them usable while disabling them in the URL. It makes no sense. You can always use jquery and javascript and assign the fullpage.js function moveTo to your menus or links if you want to keep using them.

[asofiane82]

ok thank you

[juliopimentel]

@alvarotrigo
Hey Alvaro, I was able to use anchors (without anchorsLock:true) and "leaving" the url the same while using a button like the ones on the top in here https://alvarotrigo.com/fullPage/#firstPage!
I hated that when I clicked the go back arrow on the browser itself, it didn't go back like a "normal" page does. I understand the reason of why does the plugin add that horrible #firstpage in the browser's Url. Anyways you did and amazing and friendly job! Feel really proud about it!
Un abrazo crack!

<script type="text/javascript">
    $(document).ready(function() {
        $('#fullpage').fullpage({
             afterLoad: function(anchorLink, index) {
        history.pushState(null, null, "index.html");
    },
             anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
        });
    });
</script> 

[joehuggans]

I've found a solution to this which is to use window.location.replace() since this doesn't log a change in the browser history, so when clicking back you don't have to go through each hashed link.

See here for more info - https://stackoverflow.com/questions/8747714/how-to-make-the-browser-back-button-disregard-hash-tags