Go back to index.php/about from extern site - php

Question

I have a one-page site with 3 other sites href="other.html" you can see it in the navbar. In the dropdown from the navbar, you can see that there are "extern" sites.
When I'm on one of that "extern" site and I want to go back to "index.php#about" how can I make that. So the thing is, that when the user on the "extern" site clicks on about that it jump to index.php#about and not only to index.php
Thx
<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar" id="navspy">
<a class="navbar-brand" href="#page-top" data-scroll>AR PhotoArt</a>
<button class="navbar-toggler first-button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div class="animated-icon1"><span></span><span></span><span></span></div>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto smooth-scroll">
<li class="nav-item">
<a class="nav-link" href="#about" data-scroll>LebensArt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#studio" data-scroll>ArbeitsArt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio" data-scroll>LichtArt</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-scroll-ignore>
Mehr
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="other1.html">Anleitung</a>
<a class="dropdown-item" href="other2.html">Wettbewerb</a>
<a class="dropdown-item" href="other3.html">Kurs</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#kontakt" data-scroll>Kontakt</a>
</div>
</li>
</ul>
</div>
</nav>

Answer 1

I assume you are talking about back, forward, and refresh functionality in the browser.
I have included one possible solution in jQuery (not sure if you are using jQuery tho)
Also, took the javascript solution from the SO answer below ....
https://stackoverflow.com/a/27046922/791600
UPDATE
So with the jQuery code that you said needs to be offset by 49, here is what you want to do with that:
$(window).on('hashchange', function ()
{
var top = $(window.location.hash).offset().top;
top += 49;
$(window).scrollTop(top);
});
jQuery
$(window).on('hashchange', function ()
{
var top = $(window.location.hash).offset().top;
$(window).scrollTop(top);
});
Javascript
document.addEventListener("DOMContentLoaded", function() {
var links = document.getElementsByTagName("A");
for(var i=0; i < links.length; i++) {
if(!links[i].hash) continue;
if(links[i].origin + links[i].pathname != self.location.href) continue;
(function(anchorPoint) {
links[i].addEventListener("click", function(e) {
anchorPoint.scrollIntoView(true);
e.preventDefault();
}, false);
})(document.getElementById(links[i].hash.replace(/#/, "")));
}
}, false);

Answer 2

Add slash /index.php in url before you filename.
<a class="nav-link" href="/index.php#about" data-scroll>LebensArt</a>
And this link edit like this
<a class="dropdown-item" href="/other1.html">Anleitung</a>
<a class="dropdown-item" href="/other2.html">Wettbewerb</a>
<a class="dropdown-item" href="/other3.html">Kurs</a>