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

  • 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 '15 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 – Paul Jul 16 '15 at 10:34
up vote 2 down vote accepted

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.

  • 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 '15 at 10:51
  • Added. Thanks @Lodder – Rene Korss Jul 16 '15 at 10:53
  • See update to my comment^^ – Lodder Jul 16 '15 at 10:55
  • 1
    Hehe. Don't know how I missed it. Thanks again! – Rene Korss Jul 16 '15 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 – Paul Jul 16 '15 at 12:07

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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