I'm currently working on making this website responsive. It is a static HTML website that incorporates some JavaScript to load index.html on each page.
The issue I am encountering is that the JavaScript code adds a # before every link. As a result, when a link is clicked midway through a page, the new page opens at the same scroll position as the previous one.
Any suggestions on how I can ensure that the new page always opens at the top?
The provided JavaScript script is quite complex for me to comprehend...
var ScriptJS = true;
var lastLocation = document.location.href;
$(document).ready(function () {
if (!$('#ajax').length) {
document.location = document.location.href.substring(0,
document.location.href.lastIndexOf('/') + 1) +
"#" +
document.location.href.substr(document.location.href.lastIndexOf('/') + 1);
}
if (window.location.hash)
$('#ajax').load(window.location.hash.substr(1));
});
$(document).on("click", "a:not(.regular)", function (e) {
var url = this.href;
if (url.indexOf("https") != -1 || url.indexOf('.html') == -1)
return;
e.preventDefault();
$('#ajax').load(url, function () {
var pagename = url.substr(url.lastIndexOf('/') + 1);
lastLocation = document.location.href.replace(window.location.hash, "")
+ '#' + pagename;
document.location.href = '#' + pagename;
});
});
window.onpopstate = function (event) {
if (lastLocation != document.location.href)
location.reload();
else
return;
};