browser back-button / history problem with first section due to missing anchor-hash.

[tripletto]

First of all: great work. Thank you very much.

After fiddling around a bit with fullpage.js, I encountered a little problem which can be reproduced with your demo.

Assume we have 3 or more sections. When I scroll from the first section (0) to the second section (1) and I then decide to go back to the first section via browser back button, the browser back-button won't work. The first section is missing its anchor / hashtag.

I fiddled a bit around and thought I could use your afterLoad-callback to add the missing anchor like this, so the browser navigation buttons will work from the first section on:

afterLoad: function(anchorLink, index){
            //using index
            if(index == 1){
               location.hash = 'section0';
            }};

The problem I ran into was, afterLoad seems to work only from 2nd section on upwards. The principle was tried out with afterRender and works but isn't very usefull because of deeplinking and stuff...

So i guess I would need something along the lines of

afterRender: (anchorLink, index) {
 //stuff
};

So one could check if the first section is active and if so give it the missing hashtag. Does that make sense to you or am I totally stupid? :D Is there a method to do this that I have overlooked?

Best regards tripletto

[alvarotrigo]

I believe the only way to solve it properly would be to force the addition of the anchor of the default active section on page load. Which I'm not quite sure people would like.

The other option would be to use the HTML5 history API, but its not compatible with old browsers and won't be implemented yet in fullPage.js without a proper fallback.

[Canubiz]

@alvarotrigo – I also just ran into this problem mentioned by the thread opener. I am not 100% sure (as I wasn't able to test with all possible hardware and input devices) but I think I fixed it by fiddling around in the jquery.fullpage.js file. Actually it's just 2 additional lines of code. Hopefully it doesn't break any other functionality though - but so far it works… Would be interested to hear what you think about this. :)

This is my modified hashChangeHandler function:

function hashChangeHandler(){
            if(!isScrolling){

                var value =  window.location.hash.replace('#', '').split('/');
                //alert('hash is ' + value);
                var section = value[0];
                var slide = value[1];

                if(section.length){
                    //when moving to a slide in the first section for the first time (first time to add an anchor to the URL)
                    var isFirstSlideMove =  (typeof lastScrolledDestiny === 'undefined');
                    var isFirstScrollMove = (typeof lastScrolledDestiny === 'undefined' && typeof slide === 'undefined' && !slideMoving);

                    /*in order to call scrollpage() only once for each destination at a time
                    It is called twice for each scroll otherwise, as in case of using anchorlinks `hashChange`
                    event is fired on every scroll too.*/
                    if ((section && section !== lastScrolledDestiny) && !isFirstSlideMove || isFirstScrollMove || (!slideMoving && lastScrolledSlide != slide ))  {
                        scrollPageAndSlide(section, slide);
                    }
                } 
/**** MY ADDITION STARTS ***/
                else {
                    scrollPageAndSlide(1);
                }
/**** MY ADDITION ENDS ***/
            }
        }

And I added the first line in setUrlHash function like this:

function setUrlHash(url){

            /**** MY ADDITION STARTS ***/
            if (url==options.anchors[0]) {  url= ''; }
            /**** MY ADDITION ENDS ***/

            if(options.recordHistory){
                location.hash = url;
            }else{
                //Mobile Chrome doesn't work the normal way, so... lets use HTML5 for phones :)
                if(isTouchDevice || isTouch){
                    history.replaceState(undefined, undefined, '#' + url);
                }else{
                    var baseUrl = window.location.href.split('#')[0];
                    window.location.replace( baseUrl + '#' + url );
                }
            }
}

[Annaleria]

Further to @Canubiz alteration above, we found this worked apart form the occasional glitch in Firefox and Internet Explorer. When you went back to the initial slide the url has just a # appended to it and then when you click back again the expected url is there, however to the user this looks like the back button doesn't work first time for these pages which is very annoying.

However I found by making the following change, so that the value of the url is checked this issue is eliminated.

So the setUrlHash function becomes:

    /**
    * Sets the URL hash.
    */
    function setUrlHash(url){
        if (url==options.anchors[0]) {url='';}

        if(options.recordHistory){
            if (url != '') location.hash = url;
        }else{
            //Mobile Chrome doesn't work the normal way, so... lets use HTML5 for phones :)
            if(isTouchDevice || isTouch){
                    if (url != '') {
                        history.replaceState(undefined, undefined, '#' + url);
                    } else {
                        history.replaceState(undefined, undefined, url);
                    }
            }else{
                var baseUrl = window.location.href.split('#')[0];
                if (url != '') {
                    window.location.replace(baseUrl + '#' + url);
                } else {
                    window.location.replace(baseUrl);
                }
            }
        }
    }

Hopefully this will help someone else.

[alvarotrigo]

@Annaleria your code doesn't work in 2.7.3. It doesn't do anything when clicking the back button after scrolling down one single section.

I was taking a look at this same issue days ago and I believe there's no proper solution for it I'm afraid.