Linking a Menu item to "#gkIntro" not working

My client really wants to have a Home btn on the Main Menu bar that scrolls automatically back up to the Intro, instead of having to manually scroll back up. The best I could come up with, cause for some reason linking the Home btn to "#gkIntro" doesn´t work, was to link it to "#Top" or just "#", which makes the Intro instantly appear with no scrolling effect. How can I achieve the scrolling effect back up to the Intro?

Hi

This requires a script to be attached to this linking element. Here is a script I use often so I know it works: http://css-tricks.com/snippets/jquery/smooth-scrolling/

Thanks for the Quick reply!
Doesn´t this template already come with a scrolling script somewhere that can be modified? The scrolling effect works well when linked to module positions such as: #gkHeader, #gkTop1, #gkTop2, #gkBottom1 and #gkBottom2, but when I link a menu item to the Intro module position using #gkIntro, nothing happens. I would just like to know where I could find the original script that this template uses to make the modification before adding the script you suggested that is most likely my best option if I can´t find where the original script is.

Thanks!

Hi

You will find a smooth scrolling function in /js/gk.script.js

Code: Select all

   // SmoothScroll jQUery substitue
   jQuery('a[href^="#"]').click( function (e) {
       e.preventDefault();
       var target = this.hash,
       $target = jQuery(target);
      
       if($target.length) {
          jQuery('html, body').stop().animate({
              'scrollTop': $target.offset().top
          }, 1000, 'swing', function () {
              window.location.hash = target;
          });
       } else {
          window.location.hash = target;
       }
   });


but what matter here the most is how the code for link is constructed, that's why I advice to make another instance of this script and make it to use the new link You got so it's not affecting a regular function.