Note: We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.
For best results, disable Single App mode under Semplice > Settings.
This guide will walk you through creating a single-page website. With this experience, your menu items will gently scroll to each section on the same page instead of linking to a different page.
Step 1: Setting up the Page
Create your page as you normally would in Semplice, being sure to separate all content into separate sections. You will be setting your menu to scroll to these sections.
Step 2: Creating the Page Anchors
For the browser to scroll to specific sections from the menu, we will need to create scroll-to anchors on the page.
To do this, drag and drop a code module between your sections into a NEW section.
Paste the following code in the Code module:
<div id="my-section-id"></div>
Replace 'my-section-id' with a unique ID for this section. This unique ID will be used in the menu to scroll the user to this section.
Note: You can also alternatively assign IDs on text by opening the source (<>) option in the text editor and and writing in your own ID tags.
Step 3: Linking to Anchors in the Navigation
We will now need to make the menu links scroll to our page anchors when clicked. To do so, navigate to Customize > Navigations. Select your navigation bar, and in the Menu tab options select 'Edit Menu Items.'
Under the Edit Menu options, click 'Add Menu Item.' Set the 'link type' to custom. Under 'link', type the name of the first section ID you created earlier, starting with a # sign. Repeat this step for each of the sections on your page.
That's it! Your menu items will now scroll the user to each of your sections.
Optional: Adding Scroll Animations
Though entirely optional, you can animate the scroll events. Just place the following code under Customize > Advanced > Custom JS:
(function($) {
$(document).on('click', 'a[href^="#"]', function(e) {
var id = $(this).attr('href');
var $id = $(id);
if ($id.length === 0) {
return;
}
e.preventDefault();
var pos = $id.offset().top;
$('body, html').animate({scrollTop: pos},800);
$( "body.open-menu #overlay-menu .menu-icon" ).trigger( "click" );
});
})(jQuery);
You can adjust the '800' value in the code above to speed up or slow down the animation.
Note: you will need to disable Single App mode under Semplice > Settings for this feature to work properly.
Troubleshooting
Linking to pages that are not sections
You have the option to link out to pages that are not a section on your page, such as an About or Contact page, and then link back to your sections.
Note: You will lose the ability to have animated sections if you do this.
To do so, you will need to include the full URL in your custom anchors links. For example, instead '#my-section-id' set your custom anchor link to 'http://yoursite.com/#my-section-id'