How to make a menu item scroll to heading on same page?

Question

I'm looking for a way to create a menu item (in this case "Contact") that scrolls down to the bottom of my home page where the contact information is located.

I tried creating an external URL menu item and put "#contact" in the URl field, and then place <a name="contact"> </a> in the source code, but I couldn't get it to work.

Are there any ways to achieve this in Joomla?

Answer 1

When creating anchors, you need to assign the name as an ID of the element, like so:

Link:

<a href="#contact">Contact</a>

Anchor:

<div id="contact">
  // Your form here
</div>

When clicked, it will take you to this anchor. If you wish to animate the transition with a smooth scroll, you can use jQuery, like so:

jQuery(document).ready(function($) {

    $('a[href=#contact]').on('click', function(e) {
        e.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top-0}, 500);
    });

});

Answer 2

You can do this using jQuery (as Lodder suggested). Here's an alternative solution (from this answer at StackOverflow). Place this code in your index.php file:

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

In addition, if you need the menu item to work from any part of your site (in case your contact information is visible only on the homepage), put this in your Menu Item url:

index.php/#contact