// w szablonie miejsce od którego nawigujemy scrollem
<?php
if($instance['anchor']['active']){
?>
<div id="<?php echo url_slug($instance['anchor']['name']); ?>" class="anchor-local-element position-relative" data-anchor-local="<?php echo $instance['anchor']['name']; ?>"></div>
<?php
}
?>
//JS
function localAnchorMenu() {
// create menu items
jQuery(jQuery('article .anchor-local-element').get().reverse()).each(function () {
var anchorName = jQuery(this).data('anchor-local');
var anchorID = jQuery(this).attr('id');
console.log(anchorName);
jQuery(document).find('.anchor-local-menu-items').prepend('<a data-scroll class="anchor-local-menu-item" href="#' + anchorID + '">' + anchorName + '</a>');
jQuery(document).find('#header').addClass('anchor-local-active');
});
// scroll to element
jQuery(document).find('.anchor-local-menu-item').on('click', '[data-scroll]', scrollToSection);
function scrollToSection(event) {
event.preventDefault();
var $section = $($(this).attr('href'));
jQuery('html, body').animate({
scrollTop: $section.offset().top
}, 500);
}
}
//Wykrywa miejsce do którego nawigujemy i wpisaną w niego nazwę nazwę, na podstwie tego tworzy menu
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter