One page web site

Author Message
Denis L.

Posted: 3/2/2015
Quote message 


I would like to build a one page Joomla website template with a fixed top menu like this web site:

The way I suppose it works is that you add anchors to different sections of the page and assign the menu items to those anchors?

So my questions are:

1- How do you fix the top menu?
2- How to set the anchors in the "article" sections and assign menu items to them?
3- And how to switch the menu items to active mode (like selected) when the page has scrolled to the anchor?

Thanks in advance for your help and if someone could provide some examples and the way to code this, it would be of great appreciation. :)

Denis L.

Posted: 3/3/2015
Quote message 

Hi Michel,

Thanks for your answer, it helps a lot! :)

Just one thing though... I'm not to familiar with the JQuery part to make the menu item switch to a:active state when the page has scrolled down to the anchor and without reloading the page.

Could you please show me an example and also in which template files the different codes go?

That would be very kind of yourself.
Michel K

Posted: 3/3/2015
Quote message 

Hi Denis,

First, use Google Chrome to inspect a page.

Next, in Chrome:

Take a look at:

If you click with right mouse button on a menu item, you see in the drop down menu "Inspect Element"

Click on Inspect Element.

Your browser screen will spit. (front-end and source code)

In the source code screen, you see a highlighted rule. This the is menu item you want to inspect.

If you expand all the gray arrows, you see a class named 'page-scroll'

In front end, when pressing a menu item, you see in the attribute active to appear in the source code.

So, this class page-scroll is connected to a JQuery function.
This JQuery function can be found in bootstrap.min.js

When you click a menu item, JQuery sets the class to active, css knows when the class is set to active, do something. (change color)

To explain how JQuery is working, and also, to combine this with a Artisteer template..... Hmmm... I think it is way easier to buy some One Page theme from lets say, Joomlart...

With HTTrack you can easily download all used elements of a web page. When done, you can learn how things works using notepad++.


Posted: 7/9/2015
Quote message 

Hi Elliott
This script // JSD SMOOTH SCROLLER when added to script.js does not work:

Menu Link: # grid1
Link CSS Style: menusmooth

I tried with another library js "smoothscroll.js" for

Menu Link: # grid1
Link CSS Style: smoothScroll

And it works properly and that you provided does not .So there is something wrong could it be improved?

google translate......

Posted: 7/9/2015
Quote message 

Does anybody know how Artisteer's new website is using a sticky menu and scrolling content?
Michael Trabjerg

Posted: 8/19/2015
Quote message 

Quote Adam :

Elliott sorry I forgot all about to change

jQuery(function() {
jQuery('#menusmooth a').click(function(){

on :

jQuery(function() {
jQuery('#headdemo a').click(function(){


Did it work?
Do you have an example?



Posted: 8/20/2015
Quote message 

hi Elliot

i just did what you posted..

but cannot find the positions declared in the template under the front end only comes in custom positions: position-0m position1 and so..


Posted: 4/19/2016
Quote message 

You may like this free onepage Joomla 3 template -
Lars Nielsen

Posted: 2/18/2017
Quote message 


Any news on this? Im looking for this aswell.

Regards, Lars

Posted: 3/1/2017
Quote message 

Guys, I can't make a final decision. Is Joomla really that good for making user-friendly websites? I've recently discovered a brilliant article on this issue , but I still need some recommendations from Joomla users.