Why use
Code
<script>
/* Single Page Plugin by opsquare.co */
(function () {
/*** Plugin options ***/
const options = {
homeUrl: '/', // path considered "home" — links are untouched here
};
/*** Stop editing ***/
const isHome = window.location.pathname === options.homeUrl ||
window.location.pathname === '';
function prefixHashLinks() {
if (isHome) return;
document.querySelectorAll('a[href^="#"]').forEach(a => {
const hash = a.getAttribute('href');
if (hash && hash !== '#') {
a.setAttribute('href', window.location.origin + options.homeUrl + hash);
}
});
}
function closeMobileMenuOnHashClick() {
const mobileNav = document.querySelector('.header-menu-nav-list');
if (!mobileNav) return;
mobileNav.querySelectorAll('a[href*="#"]').forEach(a => {
a.addEventListener('click', () => {
const closeBtn = document.querySelector(
'.header-menu-controls-control--close, .header-burger-btn'
);
closeBtn?.click();
});
});
}
function init() {
if (window.frameElement !== null) return;
prefixHashLinks();
closeMobileMenuOnHashClick();
}
document.addEventListener('DOMContentLoaded', init);
})();
</script>
How to install
- Create navigation links using
#anchors, e.g.#testimonials,#pricing. Disable the “Open in new tab” setting. You can also have external pages like Blog, as this plugin handles navigation between same-page and external page links. - Create corresponding sections with the same IDs.
- Copy the code to Code Injection.
