This article explains how to build a website where menu options target different places within the same page, with smooth transitioning between views.
First, let’s see how to create options that slide to another place in the same page.
To achieve this, follow the steps below:
1) Create a menu with all options, setting each option to point to an external link. Each link will be the name of an anchor.
For example, an option will point to the #services external link.
The image below shows how to define options:
2) Set the anchors in the corresponding places; that is to say, the places where you want to go upon clicking on each menu option.
The HTML code to set an anchor is as follows:
<a name="services"></a>
If you only want to set one anchor in a certain place, you can add a Free HTML GXportlet using the code shown above. Repeat this process for every anchor you want to create.
To add an anchor in a Content GXportlet, you can add this code at the beginning of the content abstract or body.
Once we have completed the previous two steps we will have a menu with options. Clicking on an option will take us to a certain place within the same page.
The websites
G. CASCO and
TecnoSeguridad show in action what we have explained.
How to configure a sliding transition effect?
If you want to make this sliding effect smoother that with HTML, you can add JavaScript code at the beginning of the page.
To do so, follow the steps below:
1) From the backend, go to the options Design -> HTML.
Click on the New button to open an editor.
Click on this button 
In the edit area, copy the following code:
<script src="http://www.mysite.com/static/shared/jquery/jquery-1.7.1.min.js"></script>
<script src="http://www.mysite.com/static/shared/jquery/jquery.noconflict.js"></script>
<script src="
http://www.mysite.com/static/landingpages/plugins.js"></script>
Replace
http://www.mysite.com by the URL of your site in production.
Click on the Save button.
If the website is in more than one language, you will have to add this code to each language.
2) Open the page design view, and add the Free HTML GXportlet at the beginning of the page.
Click on this button:
and associate the HTML code defined in the previous step.