i have the pagepiling jquery for sliding pages with anchors and is working just fine, but i want to make'it to run whitout the # page from the url ex: www.mysite.com/#aboutme <- , on click
See the plugin here: https://github.com/alvarotrigo/pagePiling.js
Here is what i have so far:
HTML:
<div class="collapse navbar-collapse sub-menu-bar" id="navbarSupportedContent">
<ul class="navbar-nav m-auto">
<li data-menuanchor="home" class="active"> <a href="">Home</a></li>
<li data-menuanchor="aboutme"><a href="#despremine">About me</a></li>
</ul>
</div>
JS:
var myAnchors = [];
$( ".navbar-nav > li" ).each(function( index ) { myAnchors.push($(this).attr("data-menuanchor")); });
$('.fullpage-slider').pagepiling({
scrollingSpeed: 280,
navigation:false,
menu: '.fullpage-progress-bar, .navbar-nav',
sectionSelector: '.pp-scrollable',
anchors: myAnchors,
afterRender: function(anchorLink, index){
NavbarColor();
},
afterLoad: function(anchorLink, index){
$('.pp-scrollable .section-number').removeClass('show');
$('.active .section-number').addClass('show');
NavbarColor();
}
There's actually one of the demos on the pagePiling.js website that dos exactly that: https://alvarotrigo.com/pagePiling/examples/noAnchor.html
Basically, do not use the
anchors
property during initialisation and you should be fine to go :)