Menu
Currently I am working on a sample project which is a single page website where all the details are divided in sections. I am calling all the section through internal linking and I want to modify the url structure of those links from like "example.com/#section-1" to "example.com/about-us". So, how can I achieve this? The following is a sample code structure.
<!DOCTYPE html>
<html>
<head>
<style>
html, body, body *{
margin:0;
padding:0;
}
body, html, div{
height:100%;
width:100%;
}
#container-1{
background-color:green;
}
#container-2{
background-color:yellow;
}
#container-3{
background-color:gray;
}
.container p{
padding:10px;
font-size:50px;
}
</style>
</head>
<body>
<div id="main-container">
<div id="container-1" class="container"><p>Container-1</p><a href="#container-2">To Container-2</a></div>
<div id="container-2" class="container"><p>Container-2</p><a href="#container-3">To Container-3</a></div>
<div id="container-3" class="container"><p>Container-3</p><a href="#container-1">To Container-1</a></div>
</div>
</body>
</html>
636
If I understand you correctly, you can use history.pushState.
So here is the steps:
pushState to push the state to the history (so you could use back and forward.Keep it in you mind that you need to configure your server that wil transfer (rewrite) any sub page to the main page. So when user will try to go to "sub page" (container2 for example) the server will return the main page, and with the javascript you will scroll to page to the right section.
Array.prototype.forEach.call(document.querySelectorAll('a'), function(a) {
a.addEventListener('click', function(e) {
e.preventDefault();
var link = a.hash.replace('#', '');
history.pushState(null, 'page', link);
scrollToElement();
});
});
function scrollToElement() {
var page = location.pathname.replace('/', ''),
container = document.querySelector('#' + page);
container.scrollIntoView();
}
<!DOCTYPE html>
<html>
<head>
<style>
html, body, body *{
margin:0;
padding:0;
}
body, html, div{
height:100%;
width:100%;
}
#container-1{
background-color:green;
}
#container-2{
background-color:yellow;
}
#container-3{
background-color:gray;
}
.container p{
padding:10px;
font-size:50px;
}
</style>
</head>
<body>
<div id="main-container">
<div id="container-1" class="container"><p>Container-1</p><a href="#container-2">To Container-2</a></div>
<div id="container-2" class="container"><p>Container-2</p><a href="#container-3">To Container-3</a></div>
<div id="container-3" class="container"><p>Container-3</p><a href="#container-1">To Container-1</a></div>
</div>
</body>
</html>
http://output.jsbin.com/zaduqo
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
