Clash Royale CLAN TAG#URR8PPP

Using pushState to change urls. How do I navigate to the exact placement directly?

I am using replaceState (pushState) to change the url as the user scrolls the website.
It is working as expected, and the url is changed. However, if I copy the generated url lets say

example.com/vision


open a new tab and navigate to this, I will get a 404 not found page.
I know that if I use anchor links in the url such as

example.com/#vision


it works, but I dont want the #.

#

How can I overcome this, and navigate the visitor to the exact place in the webpage instead of 404?

function isScrolledIntoView(elem)

var $elem = $(elem);
var $window = $(window);

var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();

var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();

return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));


$(window).scroll(function()
if (isScrolledIntoView("#1")) window.history.replaceState("state", "title", "home"); return;
if (isScrolledIntoView("#2")) window.history.replaceState("state", "title", "profile"); return;
if (isScrolledIntoView("#3")) window.history.replaceState("state", "title", "vision"); return;
if (isScrolledIntoView("#4")) window.history.replaceState("state", "title", "contacts"); return;
);


#

#

RewriteRule ^articles/?$ articles/index.php [NC,L]

1 Answer
1

This isn't something you can do client-side. In order for your urls to work and not throw a 404 error, you'll have to rewrite them to the page using htaccess. One option would be to pass the page as a parameter and use it to scroll to the appropriate position using JavaScript.

htaccess

JavaScript

Htaccess:

RewriteRule ^(home|profile|vision|contacts)/?$ /index.php?hash=$1 [NC,L]


PHP:

<script = "application/javascript">
var hash = "<?= $_GET['hash'] ?? ""; ?>";
</script>


JavaScript:

$(function ()
if (hash)
$("html, body").animate(
scrollTop: $("#" + hash).offset().top
, "slow");

);


Then your code should work normally.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.