// 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