devote / HTML5-History-API

HTML5 History API expansion for browsers not supporting pushState, replaceState
http://spb-piksel.ru
MIT License
1.02k stars 182 forks source link

Remove string after anchor completely for IE8+ #98

Open ghost opened 8 years ago

ghost commented 8 years ago

Using your great polyfill with IE8 on in-page anchor links like this.

    // looking for all the links and hang on the event, all references in this document
    $('.menu-a').on('click', function() {

        // keep the link in the browser history
        history.pushState(null, null, this.href);

        alert('history set ==>'+this.href); 

        // do not give a default action
        return false;
    });

    // hang on popstate event triggered by pressing back/forward in browser
    $(window).on('popstate', function(e) {

        // just post
        alert("We returned to the page with a link: " + location.href);
    });

When I click on the in-page anchor link, .menu-a in IE8 it adds a / to the URL hash like this for example.

domain.com/#/anchor

Now when I click the back or forward button in IE8 it will not find the anchor and go back to top of page instead of to the section. This is because the / is added after the anchor by default.

How can I please completely remove the / after the anchor so that when I click an in-page anchor link in IE8 it will become this.

domain.com/#anchor

I am trying to make a single page anchor navigation that also works in IE8 with remembering the URL hash for each section so that when the user clicks back and forward button the page actually scroll to the correct section.

For example when I try to have ?type= empty it does not stay empty but adds the /.

<script src="js/vendor/history.4.2.7.min.js?type="></script>

It would be great if for IE8 I could somehow tell your code that I do not need an extra string after the anchor.

Thank you very much for your help.

ghost commented 8 years ago

I changed the history.js default settings to this removing the / inside the "type": '/',

  // default settings
  var settings = {"basepath": '/', "redirect": 0, "type": '', "init": 0};

Now it works.

Interesting observation. I am using Velocity.js to animate the scroll to the anchors. When I click the back button IE8 smoothly animates the scrolling to the correct section, however when I click the forward button IE8 jumps to the section straight ahead without animating the scrolling. No idea why but for now I am happy history and browser back and forward buttons work well in IE8.

Thank you for this!