How to fix "Go to # on this page" to show exact field

How to fix "Go to # on this page" to show exact field to best center next section? Hope this question is clear, I would like to know if this function can be used somewhere else on site other than homepage?

Thank you in advance and all the best!
Andrea

Hi,

The following code from Musicstate/js/gk.scripts.js file is used to to display this navigation:

Code: Select all

// section-nav
        if(jQuery(document.body).hasClass('section-nav')) {
            var sections = [];
            // put the main sections if exists
            jQuery.each(['gk-header-mod', 'gk-mainbody', 'gk-bottom1', 'gk-bottom2', 'gk-bottom3', 'gk-bottom4'], function(i, item) {
                if(jQuery('#'+item)) {
                   sections.push(jQuery('#'+item));
                    var link = jQuery('<a href="#" class="gk-section-nav" data-num="'+ (i+1) +'"></a>');
                    jQuery('#'+item).append(link);
                }
            });
            // put the last section
            sections.push(jQuery('#gk-bottom-section'));
            // add events to the links
            jQuery('.gk-section-nav').each(function(i, link) {
               link = jQuery(link);
                link.click(function(e) {
                    e.preventDefault();
                   
                    jQuery('html, body').animate({
                        scrollTop: sections[link.attr('data-num')].offset().top - 80
                    }, 500);
                });
            });
        }


You can try to change "offset().top - 80" value, but it's the same for all sections, so probably you have another paddings/margins on your frontpage. You can also disable this navigation at all in Template Options.