Navigate using Javascript, but change the URL

Question

I want to navigate inside the page with an animation using Javascript, but also change the URL so the user can click "back" to go back to the previous "page".

I have no idea how to approach this. Do I put the content I'm navigating to on a new html page, or on the same page?

What I've tried so far:

<a href="/someOtherPage">Some Other Page</a>

This will completely reload to someOtherPage, and won't allow animations.

<a href="#" onclick="animateToOtherSection()">Some Other Page</a>
<script>
  function animateToOtherSection() {
    //things like fade in/out or scroll
  }
</script>

This works if the content I'm navigating to exists in this page, which is okay, but the URL won't be changed (except for the additional #).

If i try to change window.href in Javascript, the entire page reloads, which is not desired.

This question was inspired by some websites like this. When the See our projects button is clicked, although it as an anchor element, the page doesn't reload, but a fade out/in executes and the navigation bar above stays throughout. If I click the 'back' button in my browser, another animation takes me back to the splash screen.

Note: This is not an option:

<a href="#section">Some Other Page</a>

I don't want to just scroll to an element, but manipulate and show/hide a lot of elements on the screen.

Thanks in advance for the answers!

Looks like [this](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries) is what you're looking for. — Jeto, Mar 03 '18 at 12:40
EDIT: I think that's precisely what I want. If you could add more details in an answer as to how to interrupt the reload when is clicked to manipulate the history yourself, that'd be appreciated. — H. Saleh, Mar 03 '18 at 14:34

score 1 · Accepted Answer · answered Mar 03 '18 at 15:42

The DOM window object provides access to the browser's history through the history object. It exposes useful methods and properties that let you move back and forth through the user's history, as well as -- starting with HTML5 -- manipulate the contents of the history stack.

https://developer.mozilla.org/en-US/docs/Web/API/History_API

Load data from the server and place the returned HTML into the matched element.

http://api.jquery.com/load/

You can make it easy here is example:

HTML:

<button id="changeUrl">See our projects</button>

JavaScript:

$('#changeUrl').click(function () {
    history.pushState({}, 'Title', '/Url/Test');

    $(document).load('/url html');
});

Also you can add animation for example :

$('#changeUrl').click(function () {
    $('body').fadeOut();

    history.pushState({}, 'Title', '/Url/Test');

    $(document).load('/url html', function () {
        $('body').fadeIn();            
    });
});

score 0 · Answer 2 · answered Mar 03 '18 at 15:34

You may also add a JavaScript "fadeout" animation when "unloading" the current page, and a "fadein" animation executing at the begining of the next page load.

If you prefetch most of your content, the transition will be smooth.

To avoid a page load when you click on a link, attach an onclick event to your link, and finish your JavaScript callback by a e.preventDefault(); as explained in this question : How to stop default link click behavior with jQuery from Mozilla Dev Network : https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

Cancels the event if it is cancelable, without stopping further propagation of the event.

About link prefetching : https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ

<link rel="prefetch" href="/images/big.jpeg">

Or even really loading <img with a style=display:none; to hide them…

Navigate using Javascript, but change the URL

2 Answers2