Wordpress Scroll Navigation Bar Anchor for all themes

 

This post creates a custom Scroll Navigation Anchor on the right side apply for All Themes

Step 1: Make a page with section ID

Step 2: Insert HTML & Javascript to widget or header of the theme (for WPBakery insert directly to a page using raw HTML & Raw JS)

HTML code

<div class="t2ds-navigation-anchor btnav-container" style="display: block;">

<a href="#aboutus" class="t2ds-anchor-button"></a>

<a href="#partners"  class="t2ds-anchor-button"></a>

<a href="#portfolio"  class="t2ds-anchor-button"></a>

<a href="#contactus"  class="t2ds-anchor-button"></a>

</div>

JS Code: Please aware maybe you need change JQuery to $ base on your site

<script> 

//Handle Click

jQuery('.t2ds-navigation-anchor').on('click','a',function(e) {

  //e.preventDefault();

jQuery('.t2ds-anchor-button').removeClass('t2ds-anchor-active');

  jQuery(this).addClass('t2ds-anchor-active');

});

//Handle scroll

jQuery(document).ready(function() {

    jQuery(document).on("scroll", onScroll);

    //smoothscroll

    jQuery('a[href^="#"]').on('click', function(e) {

        e.preventDefault();

        jQuery(document).off("scroll");

        jQuery('a').each(function() {

            jQuery(this).removeClass('active');

        })

        jQuery(this).addClass('active');

        var target = this.hash,

            menu = target;

        jQuerytarget = jQuery(target);

        jQuery('html, body').stop().animate({

            'scrollTop': jQuerytarget.offset().top + 2

        }, 500, 'swing', function() {

            window.location.hash = target;

            jQuery(document).on("scroll", onScroll);

        });

    });

});

function onScroll(event) {

    var scrollPos = jQuery(document).scrollTop();

    jQuery('.t2ds-anchor-button').each(function() {

        var currLink = jQuery(this);

        var refElement = jQuery(currLink.attr("href"));

        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {

            jQuery('.t2ds-anchor-button').removeClass("t2ds-anchor-active");

            currLink.addClass("t2ds-anchor-active");

        } else {

            currLink.removeClass("t2ds-anchor-active");

        }

    });

}

</script>