0

I have a single pager website where each of the buttons takes you to a separate section following an animation. I've set up an example here: https://dev.dport.me.

Currently when you navigate to a page, the URL stays the same. For example, navigating to the About section does not append #about to the URL. I would like the site to work more like a normal site in respect to navigation.

What is the best way to go about making it such that:

  1. Navigating to a "page" changes the URL. Following the example, either to #about, or even better, /about.
  2. Navigating directly to a subpage works. Meaning that if I navigate to https://dev.dport.me/about, it takes me straight to the subpage.
  3. The back button works. Currently if you navigate into a subpage, you must use the back button on the page. The browser's back button just leaves the whole site.

Is there some pre-existing javascript library that does what I'm looking for? Or am I going to have to gun it alone, perhaps with something like this.

Daniel Porteous
  • 5,536
  • 3
  • 25
  • 44
  • There are a number of different client side routing libraries. Also there are frameworks for single page apps like angular, vue, ember, react etc – charlietfl Dec 07 '17 at 02:09
  • I'd love to hear about them, given my situation which do you think is best? Perhaps I was just searching for the wrong thing on google... – Daniel Porteous Dec 07 '17 at 02:10
  • Try a search for "javascript client router/routing" as well as look at some of the frameworks mentioned – charlietfl Dec 07 '17 at 02:11
  • this might do what you are looking for: https://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page – Liora Haydont Dec 07 '17 at 02:14
  • Grapnel looks promising. I want something lightweight because really this is just a static site with some fancy animations. I'm not looking to introduce node.js or frameworks or anything, just something I can drop into the index page's html. – Daniel Porteous Dec 07 '17 at 02:18
  • Client side frameworks can be simple script tags and not require using node – charlietfl Dec 07 '17 at 02:34
  • Well I'm not having much luck with either Grapnel or page.js. They're just overwriting the button behaviour so the page doesn't navigate. So if anyone has a nice simple thing that I can just drop in that'd be great. Seems like a simple enough thing. – Daniel Porteous Dec 07 '17 at 03:27
  • I ended up getting most of it with just coding it up manually with the various push and pop state functions. Thanks everyone! – Daniel Porteous Dec 07 '17 at 04:53

0 Answers0