CODEWITHSUNDEEP
html
Omkar
Omkar

Reputation: 53

how to change URL dynamically in HTML5

I'm creating single HTML5 page using bootstrap. I have some menu items like services, portfolio etc. When I click on one of these menu items, it scrolls down and display that particular section but it does not change the url.

for example: suppose if I opens website, index.html will open. now if I click on "portfolio" link, it scrolls down and display the section "portfolio" but it does not change URL like index.html#portfolio. It remains index.html

refer: www.nuabikes.com/#/home when you open this site, click on one of the menu item and check the url, it changes automatically. And also when page is scrolled down the URL changes automatically.

I want to add this feature in my page.

Upvotes: 1

Views: 3038

Answers (1)

Martin Gottweis
Martin Gottweis

Reputation: 2739

When you change the content with Javascript and you want the change to reflect in the address. Its called routing, check it up.

Basically you have three options:

  1. Use a framework such as angularjs or ember who does the routing for you more or less
  2. Us a Jquery plugin that does some this. Such as http://www.asual.com/jquery/address/
  3. Handle the change yourself. See this for reference: Updating address bar with new URL without hash or reloading the page

Upvotes: 3

Related Questions