Good day!

Building a website based on a one-page AJAX template: http://www.templatemo.com/tm-398-nature

Javascript is widely used in this template, in particular, the Jquery library is used. Faced the following problem: When navigating through the site, the address bar remains unchanged. I can not give a direct link to a specific section of the site.

Please share your experience in navigating AJAX sites.

  • pjax towards pjax . for example, from here ... you can run through the site via ajax and the links will be necessary. - Alexey Shimansky
  • @AlekseyShimansky: If we take into account the title of the question, then there are якорей . As far as I remember, pjax does not support anchors (fallback for old browsers), but pushState() is the personal preference of the pjax author. - romeo
  • @ Roman: If you decide to follow the SPA-way , then you should pay attention to the SPA-frameworks (Angular, Ember, Knockout, etc.) with the routing and the rest plushkmi. And pushState() about pushState() from Mikhail Davydov (former yandex employee). - romeo
  • @romeo The title, of course, contains anchors, but judging by the body of the message, in principle, anchors are optional. Because the essence of the problem is different: in the immutability of the address bar, with dynamic loading of content. This problem is more than solved by pjax . If you really want an pushState , and anchors are desperately needed, then yes - you can push-up) - Alexey Shimansky
  • @ Alexey Shimansky Please post your comments as an answer. - Nicolas Chabanovsky ♦

2 answers 2

Because the subject title is a bit inconsistent with the body of the message, then I will try to summarize both.

If you want to really use anchors, including the need to have them in the address bar, i.e. the view was of the type: http://mysite.ru/#users , then you can use the API to work with the history in the browser. In particular, you need the pushState method pushState You can read more about it on for example here.

If you, judging from the message itself, it is precisely the presence of links in the address bar to which the call was made, then try to get acquainted with pjax (pushState + ajax) . It just includes working with the history API and you do not have to take on the work with the logic of history. The content will also be taken through ajax , while the links will be necessary.

One option is HERE

This particular pjax version does not work with anchors. If you are lazy and do logic based on the history API yourself and at the same time need anchors, then there are various kinds of pjax forks that allow support for hash navigation, for example , this

    As an option, use a special form of recording anchors, and pick up JS.

    For example, links like: site.ru/#about, site.ru/#contacts - navigate through the pages. And links of the form, say: site.ru/#about:ancor_1 and so on are recognized by JS as an address with an additional parameter, which calls for example the function of smooth scrolling to the desired anchor.