Joomla: menu items point to different positions in the same page

Question

I want to create a menu in sidebar, each item will lead to a section in the current page by scrolling up and down within the page. Is there any module that I can use? I am using 3.0 and I have access to all the files

Thanks

Answer 1

Joomla anchor menu

A. First you have to create id's for the sections you want to scroll to

Case 1 : you have access to your template files via FTP.

Edit your template file (index.php) at root directory of your template and put ID's for each section you want to scroll to. example :

<div id="section1">
... YOUR CODE ...
</div>

Case 2 : You don't have access to your template file via FTP.

Go to the template manager : 1. extensions/template manager. 2. click on your template name on the right of your screen (under template not under style). 3. click on "Edit main page template". 4. edit your index.php file here.

Find the sections you want to lead to and give them an ID.

B.Set the menu anchor links.

1. Create a menu as usual (Menus/Menu Manager/Add new menu)
2. Create a menu link.

Here is the trick :

for the menu item type choose: system links/external url. In the "link" field write

#your ID

give a menu title. Save and publish your menu. Now when you click on your menu link it should scroll your page to the right section. If the scroll isn't smooth enough for you you can use jquery.

example:

var $root = $('html, body');
$('**YOUR IDS HERE**').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 2000, function () {
        window.location.hash = href;
    });
    return false;
});