How to make a single-page template?

Question

I want to make a single-page template from scratch, but I don't really know where to start. I'm using Joomla 3.x, so my approach should be bootstrap compatible.

I guess that since the menu buttons make the page scroll, it makes sense to use modules for every menu item. But then I wonder how I can get the scrolling and anchors to work properly.

Could someone point me in the right direction?

Answer 1

You are on the right track.

Menu items

Create all menu items as System Links > External URL and set link as #section-[MODULE_ID_HERE].

For example your menu links should look like this

<a href="#section-[MODULE_ID_HERE]">First section</a>

Modules

I would create new chrome for modules, so they would all have unique ID attribute. For example with module ID or alias. Then you can link to them.

Joomla! docs for module chromes.

Module wrapper div should look like this.

<div id="#section-<?php echo $module->id; ?>">
    <!-- Module content here -->
</div>

section- prefix is just for example, you don't have to use this.

Scrolling

I found a short example. This prevents regular event on clicking link and animates browser to right section.

/**
 * @author Paul Underwood
 * @source http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery
 */

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});