Anchor links for scrolling create a wrong url in IE9 and below which breaks the content.

[danieljmg]

A scroll link as doesnt work under IE9 and below after pushed some hashtag state. Lets say, I'm on localhost/index, I go to "a" through ajax what push localhost/index#/a, and now inside "a" I click on that must scroll to #idx on a. When I press, it ask to the web server(nginx) for localhost/index#/idx rather than localhost/index#/a#idx. For know I'll go to a javascript solution rather than html, but I think it's worth to make you know about this issue. Regards.

I just add my jquery solution. Doesnt push any state, because I didn't need it, just the in-page scroll. The advantage is that you don't need to change any html, just add this to your js file or downpage in the javascript section. EDIT:STILL DOESNT WORK ON IE8 BECAUSE of the default behaviour of follow the link.

    $(document).on('click', 'a[href^="#"]', function(e) {
        e.preventDefault();
        $('body, html').animate({scrollTop: $($(this).attr('href')).offset().top});
    });

[devote]

Hi, did not quite understand the problem. Explain in detail or give me an example. Thanks

[danieljmg]

I gave and example: url:localhost/index -> url:localhost/index#/ajaxloadedpage -> inside "ajaxloadedpage" I click on -> url:localhost/index#/idx rather than url:localhost/index#/ajaxloadedpage#idx.

This is for IE8 and 9 where native pushstate doesnt work. In a modern explorer the final url would be localhost/ajaxloadedpage#idx , where #idx is a HTML scroll (It scroll to the element with id="idx")

Anyway here you can find how the html scroll works http://w3guy.com/adding-scroll-top-link-css-id-selector-html-link/

[devote]

Thanks, now I have seen this error. I will correct soon

[devote]

Have you tried to initialize the library?

for example:

(function() {
  // This line starts initializing the library
  var location = window.history.location || window.location;

  // your code here

})();

[danieljmg]

I have that line in a .js file that I load just in the first access(so not called twice in ajaxload) in the bottom javascript section of the html/php like:

 $(document).ready(function(){
    var addEvent = window.addEventListener||window.attachEvent;
    addEvent("popstate", function() {
        var location = window.history.location || window.location;
        $.ajaxSetup({ cache: false });
        $.get(location.href,function(data){$('#content').html(data);});
    });

Anyway is for a webapp that is quite large developed already, so everything works perfectly even in IE8, just not that. I haven't notice that after months since I implemented this scroll, and I've added your library and tested like three months before this html scroll, replacing a previous pushstate api that lack of updates and was giving some weird problems. As well yours follow the standards, so there wasn't anythink to think :+1:

For normal call, i have onclick function in the <a elements to this function:

function extraajax(href,title){
    history.pushState(null, title, href);
    $.ajaxSetup({ cache: false });
    $.get(href,function(data){$('#content').html(data);});
    window.scrollTo(0,0);
}

Like

<a href="pagetoload" title='Page to load with ajax' onclick="extraajax(href,title);window.scrollTo(0,0);return false;">Link</a>

As well loaded in the same file as the previous but not inside document.ready. Anyway in this case extraajax doesnt work because is a normal href call, So i dont involve this function. In modern web browsers including IE10, even making use of your library, the html scroll works.

For html scroll calls, when it detects # links, just scroll to the element without reload the page IE6+. If you need more information let me know.

[devote]

line: var location = window.history.location || window.location; needs to be initialized before running any other scripts that would library realized that you intend to work in the future with window.history.location

Now I added init parameter to the library that would initialize itself occurred while loading ... This will solve your problem:

<script type="text/javascript" src="history.js?init=true"></script>

[danieljmg]

I downloaded and overwrite the old one and still doesn't work, does the same. I used "history.iegte8.min.js" I'm working for some javascript solution, If I reach a compatible one I'll let you know.

[danieljmg]

Ok, I've reached a lightweight solution that works in accordance to the standards of HTML, without the need of a plugin(no need of JQUERY), loaded just one(let's say just in the fresh load of the site, not on every ajax call), compatible IE6+ and without server connection(DOM scroll). The anchors will look like:

<a href="#idtogo" onclick="gotoid(href,event);return false;">

And the javascript function:

function gotoid(href,event){
    (event.preventDefault) ? event.preventDefault() : event.returnValue = false;
    window.scrollTo(0,document.getElementById(href.split("#").pop()).offsetTop);
}

This off course can be attached onclick, instead of an onclick inline code. Inline is just more efficient but create dirtiness and complexity on the code. Hope this helps, you can introduce it in the faqs.Regards.

PD:At the end you can introduce history.pushstate but in IE9- still doesnt work properly, create a wrong address as mentioned at the beginning of the issue. It still works, but if the user reload that address, a problem arise. Anyway a scroll address isnt important.

[devote]

... And the javascript function:

do not understand why such complexity.

... you can introduce it in the faqs.Regards.

The faqs says that the necessary initialization of the library ... you somehow categorically not doing it ... Maybe you have reasons for it, but I do not know about them ... If you show small a working example of the error, I could understand what you mean, maybe I do not understand you correctly.

[danieljmg]

Complexity? There's any, is just javascript, 3 lines and the first one is to prevent IE to follow the link. I know what the faq sais but because you've said that with the update the problem is solved, I just updated and try. Anyway Ive tried with yor solution right now adding the line and seems to create the correct URL, but the server doesnt recognize it which meand doesnt scroll, just load the page. Anyway my solution suits more to me because doesnt connect to the server, so is just DOM action, faster, less download timing and without parsing problem. Regards.

[devote]

Please reopen it or create new issue if you needed. Thanks!