Navigational arrows - can you make it go back up?

Hi.

I love the navigational arrows on this template but have one question...

Is it possible to make the final arrow (just after the Top Users module and above the THERE ARE MANY VARIATIONS module) point and navigate back upwards rather than to the end? That would be neat!

Thanks as always

Depending on your module configuration you need to modify this file:
templates/gk_musicstate/js/gk.scripts.js

Find this block of code which adds the navigation elements:

Code: Select all

      jQuery(['gkHeaderMod', 'gkMainbody', 'gkBottom1', 'gkBottom2', 'gkBottom3', 'gkBottom4']).each(function(i, item) {
         if(jQuery('#'+item).length > 0) {
            sections.push(jQuery('#'+item));
            
            var number = i+1;
            var link = new jQuery('<a href="#" class="gkSectionNav" data-num="'+number+'"></a>');
            jQuery('#'+item).append(link);
         }
      });


and remove from it module which should not scroll down - in case of demo content it will be last module, so the code looks this way:

Code: Select all

      jQuery(['gkHeaderMod', 'gkMainbody', 'gkBottom1', 'gkBottom2', 'gkBottom3']).each(function(i, item) {
         if(jQuery('#'+item).length > 0) {
            sections.push(jQuery('#'+item));
            
            var number = i+1;
            var link = new jQuery('<a href="#" class="gkSectionNav" data-num="'+number+'"></a>');
            jQuery('#'+item).append(link);
         }
      });


Now you need to create your own "to top" link... Continue with same file and just below above section add another that will create the element. The whole section will look this way:

Code: Select all

      jQuery(['gkHeaderMod', 'gkMainbody', 'gkBottom1', 'gkBottom2', 'gkBottom3']).each(function(i, item) {
         if(jQuery('#'+item).length > 0) {
            sections.push(jQuery('#'+item));
            
            var number = i+1;
            var link = new jQuery('<a href="#" class="gkSectionNav" data-num="'+number+'"></a>');
            jQuery('#'+item).append(link);
         }
      });
      jQuery(['gkBottom4']).each(function(i, item) {
         if(jQuery('#'+item).length > 0) {
            sections.push(jQuery('#'+item));
            var link = new jQuery('<a href="#" class="gkSectionNavToTop"></a>');
            jQuery('#'+item).append(link);
         }
      });


Now just after this block of code:

Code: Select all

      jQuery('.gkSectionNav').each(function(i, link) {
         link = jQuery(link);
         link.click(function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            jQuery('html, body').animate({
               scrollTop: sections[jQuery(link).attr('data-num')].offset().top - 80
            },500);
            
                        
         });
      });


add some more js code, so entire block will look this way:

Code: Select all

      jQuery('.gkSectionNav').each(function(i, link) {
         link = jQuery(link);
         link.click(function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            jQuery('html, body').animate({
               scrollTop: sections[jQuery(link).attr('data-num')].offset().top - 80
            },500);
            
                        
         });
      });
      jQuery('.gkSectionNavToTop').click(function(e){
         e.preventDefault();
         e.stopPropagation();

         jQuery('html, body').animate({
            scrollTop: 0
         },500);
      });


Now the last thing is to add styling for this element.
please edit: /templates/gk_musicstate/css/override.css and add at its end:

Code: Select all

.gkSectionNavToTop {
   bottom: -30px;
   left: 50%;
   margin: 0 0 0 -27px;
   position: absolute;
   z-index: 101;
}
.gkSectionNavToTop:before {
   border: 2px solid #E74C3C;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   color: #E74C3C;
   content: "\f106";
   display: block;
   font-family: FontAwesome;
   font-size: 24px;
   font-weight: 400;
   height: 48px;
   line-height: 46px;
   text-align: center;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
   width: 48px;
}


Remember to enable "CSS override" in template settings - advanced section.

This should do the trick

And it certainly did... Cyberek you are a superstar!!

Thanks for making me go back up

No problem - this one could be done offline .
Ps - I'm wondering if those kind of solution are readable for you and allows you to deal with small problems already by yourself?

Hi Cyberek - yes, I'm running out of questions finally for MusicState!
I do often have the confidence to deal with small problems myself, but sometimes I like to know the developers "optimum" method so I go the correct way forward

Thanks for everything.

No problem - if you will have any other questions - I'll be there to help you .