2

Yes i know this has been asked before here but i cannot seem to get an answer from the suggested solutions. I am trying to create one of the items in my Main menu to scroll to certain section on my website. The code that i am using which i have inserted just before closing of the body tag is as shown

 
var $root = jQuery('html, body');
jQuery('#t3-banner').click(function() {
    var href = jQuery.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 2000, function () {
        window.location.hash = href;
    });
    return false;
}); 

The section that i am trying to scroll to is the #t3-banner. On the menu item (which i have created as an external menu)i have added the #t3-banner in the link section.But it doesn't seem to work. I am not very good in j query. Could anyone here help me please.The site is this And the menu is let us hunt for you

2
  • If you were able to provide a link to your website for a live preview so we can inspect the code, I think we'll be able to provide you with a concrete solution ;)
    – Lodder
    Jul 15, 2015 at 9:14
  • Here's the link. The menu item i am working with is Let us hunt for you. When clicked it should go to banner Getting started at the bottom of the page
    – Muteshi
    Jul 16, 2015 at 10:34

1 Answer 1

2

Your selector jQuery('#t3-banner') is wrong. This should be selector for your <a>, which has attribute href="#t3-banner".

It would work with this:

jQuery(document).ready(function($){
    var $root = $('html, body');
    $('a[href^="#"]').click(function(e) {
        // Don't follow the link, orherwise it would jump to section without animation
        e.preventDefault();

        var href = $.attr(this, 'href');
        $root.animate({
            scrollTop: $(href).offset().top
        }, 2000, function () {
            window.location.hash = href;
        });
    });
});

Code has to be in jQuery(document).ready, because event listener can only be added if DOM is ready.

It selects all <a> elements, what have # in href.

NOTE: Beware, it takes ALL <a> elementson whole page. If you only want it for menu, you should make your selector more specific.

For example if your menu wrapper has ID menu, then it could be jQuery('#menu a[href^="#"]').

You can take a look on my answer on "How to make a single-page template?". Perhaps clarifies things a bit.

5
  • Might also be worth mentioning the code should be wrapped in document ready ;) Also, you're mixing jQuery() and $(). Use one or the other and if you go with $(), make sure it's an alias of jQuery.
    – Lodder
    Jul 16, 2015 at 10:51
  • See update to my comment^^
    – Lodder
    Jul 16, 2015 at 10:55
  • 1
    Hehe. Don't know how I missed it. Thanks again!
    – Rene Korss
    Jul 16, 2015 at 10:58
  • Well guys i'm kind stuck..i have made the changes as you have suggested but i can't seem to get it. Would you check my sitehere The menu item i am working with is Let us hunt for you. When clicked it should go to banner buttonGetting started at the bottom of the page. Thanks
    – Muteshi
    Jul 16, 2015 at 12:07
  • Your selector should be exactly #t3-mainnav a[href^="#"], you had #t3-main-nav a[href^="#t3-banner"]. Also, you don't have any element with id="t3-banner", you only have such class. Add id too.
    – Rene Korss
    Jul 16, 2015 at 15:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.