7

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?

1
  • you need to use id of the position from the layout that you want the link to scroll to. It worked for me!
    – user7838
    Feb 21, 2016 at 8:04

2 Answers 2

7

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);
    });

});
3

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

Your Answer

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

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