Ultimatum and Smooth Scrolling One Page Navigation

onepage
Many users have asked me how to do ‘Smooth Scrolling One Page Navigation’ in Ultimatum, as is used in the Ultimatum Parallax Theme. Unfortunately, there is no automated way to do this, so I need to show you how to do this using code, in the easiest, least painful way that I can. So, get your fingers ready for coding; the easy way – the Ultimatum way!

Here is a video to help you. It is recorded in 1080p, so make sure you set it to full HD in settings and full screen!

One Page designs are not always suitable

It is important that you understand a ‘One Page’ design is not suitable for all websites. They are best suited to sites with few ‘pages’ – so the menu is simple; with no sub-menus. The website will have relatively fixed content – probably no blog, not a shop. Also, ‘One Page’ designs are not best suited to mobile usage (the length of them and the large amount of data to be downloaded on one page), so you would probably design the ‘home’ page with alternate content to show for mobile users, including splitting the pages out into separate pages.

Ultimatum Layout

The first thing to do is to make and save a basic Ultimatum full layout for the Home page that we will make. I will name this layout ‘One Page Menu’. At this stage it does not need any rows or content.

Make the Pages

Even though this menu demonstration page (desktop version) is a ‘One Page’ design, it should be made in pages (For your own site, the ‘home’ page, needs to be set as such in the WordPress Reading settings, but I will not do that here). In the WordPress admin menu, if you haven’t already made them, we need to make the six dummy pages that we need; Home, About Us, Features, Our Team, Projects and Contact (the slugs/names for which will be: home, about, features, team, projects and contact – notice how these are lower case and some have been shortened). To make filler text for these dummy posts and pages, I use the Lorem Ipsum site. For the Home page only, we need to use the WordPress page editor ‘Layout Selection’ panel to assign the newly made ‘One Page Menu’ to this page.

Make a One Page Menu

Next, in the WordPress admin, we need to make a One Page menu. It will be a menu similar to the one seen in the Ultimatum Parallax Theme. It will have six menu items for the dummy pages that we have already made: Home, About Us, Features, Our Team, Projects and Contact. However, instead of making the menu using the Pages tool, we will use the Custom links tool. The Home one will have a URL of ‘«hostname/path/pagename»/#top’ and Link Text of ‘Home’. The others have matching pairs of URL and link text, for example Our Team has a URL of ‘«hostname/path/pagename»/#team’ and link text of ‘Our Team’.

Ultimatum Partial Layouts

The Ultimatum Layout tools are very powerful, and give you the option of making Full and Partial layouts. Where possible, make much of your site in Partial Layouts, especially for sections of pages that will be used in more than one layout, and for the header and footer. For the purposes of this tutorial, I will make two partial layouts; the header with the logo and navbar, and the ‘back to top’ link that appears many times on the page.

Header Partial Layout

Create and name the partial layout for the header and insert a row, of the type 25%/75%. In the left (25%) column drag and drop the Ultimatum Logo widget and in the right part drag and drop the Ultimatum Menu widget. Type in the Logo name and tagline, and choose the New – Ultimatum Menu and the ‘One Page Menu’. You may want to set a different font-size, font colour, padding and margins for the logo, tagline and menu parts, using the Template or Layout CSS panels. Similarly, this logo/navbar row is set to position: fixed, to be full width, has a high z-index to place it above other page content and has a slightly opaque white background.

Insert another row beneath the logo/navbar row, with 100% content width layout. Into this drag and drop a Text widget and paste this code into the content box:

Both of these header rows are set to 81px height.

Back to Top Partial Layout

In reality, there are many ways to offer a back to top function; my preference is to use a floating back to top button/link, but that is not for this tutorial. Indeed, clicking the Home link on the navbar, which itself is always visible (as you will see), will take the visitor back to the top. However, for the purposes of this tutorial, we will have a row with the font-awesome arrow-up icon to the right edge of the page. For this make a partial layout called ‘Back to Top’ and put a row in it with the 100% slider layout in. Then drag and drop a Text widget into that row and paste this code into the content box:

I used the Wrapper CSS settings (the edit icon in the bottom left of the row in the layout) to change the link color of the arrow to match the page scheme (orange in this case).

One Page Menu Full Layout

Now that the all the pages, menu and partial layouts are done, it is time to return to the One Page Menu full layout we made at the start of this tutorial. Right now it is empty, but you should be able to see a panel of ‘Available Parts’, which should, at least, have your ‘Back To Top’ and ‘One Page Header’ partial layouts in. Drag and drop the ‘One Page Header’ partial layout into the Layout Header. Most Ultimatum layouts should have a loop widget in them, so insert a row into the Body section, selecting the 100% layout type, and drag and drop the WordPress Default Loop into that. As this is to display the content of the ‘Home’ page, only the settings on the Single Post Layout tab matter; the settings that you select will depend on your needs. Drag and drop a copy of the ‘Back To Top’ partial layout under this row.

The following instructions, relating to the inclusion of the ‘About Us’ content, can also be repeated for the other ‘pages’ of content; Features, Our Team, Projects and Contact.

Insert another row into the Body section, selecting the 100% layout type, and drag and drop a copy of the Text widget into the row and add this content:

Into this same row, drag and drop a copy of the Ultimatum Include Page widget, just under the Text widget. Select the page content that you want included, and, because the title is in the Text widget, switch off the Title option (you get more control over the section title this way, as you can modify the HTML as you need, including the heading type, which you will see I set to h2, whereas for widgets it normally defaults to h3). Finally, drag and drop a copy of the ‘Back To Top’ partial layout under this row.

Repeat these instructions for each ‘page’ of content.

The smoothScroll.js JavaScript

This is the code file that does the work:

On line 9 you will see the number 1000. This is the speed at which the page scrolls. Alter this to meet your needs (bigger = slower, smaller = faster).

The functions.php file

You will need to load your smoothScroll.js file and, if you use one, the external custom css stylesheet. This is done in your child theme’s functions.php file. To help you find and edit this, you might find it useful to load a free WordPress plugin called WP Editor. One thing to note about WP Editor is that it takes over as your default Post/Page editor, so if you do not want it to do this, after you install and activate it, go to the plugin’s settings and select the Posts Editor side tab (it may well open to that) and set ‘Enable the Posts Editor’ to ‘No’ and save.

Having installed this plugin, in the WordPress admin side menu, under the Appearance menu, you will now see a revised sub menu option ‘Theme Editor’. In here you can edit some of the theme files and you can also use this page to upload files to the theme folder. One file you will see is called functions.php. It is normally empty except 3 comment lines at the top. This is what my version looks like for this One Page Menu site:

I have put comment lines in to explain what the code is doing.

The smoothScroll.css file

This is the custom css used in the demonstration, in addition to style added in the Template, Layout and Wrapper CSS panels:

And that’s it! Enjoy!

by Trevor Nelmes

Trevor is the head of support and testing at Ultimatum Theme and owns a WordPress-based web design business called CDNWebDesign. He has been programming since the 1970’s and web designing since 1999. In his spare time, he likes to take scenic photographs in the beautiful Cotswolds in the UK.

Comments

  1. Trevor:

    Great video. After following all of your instructions, and doing the 3F procedure (Fix Fumble Fingers) the smooth scrolling effect worked, but I was left with a problem. Except for the home page, all the single pages scrolled to the top of the window, leaving the title and some of the text behind the header (see https://dl.dropboxusercontent.com/u/18696861/HidenTitle.png.) Modifying the section of the javascript that actually scrolls the page as shown below fixes the problem on Firefox, though not quite on Chrome. An additional 35 had to added to header_offset to get the title completely clear of the header. There may be a browser neutral way to do this, but it’s late in the states, and my fingers tend to get even more fumbly (is that a word?) after midnight.

    ` if (target.length) {
    // Get the height of the header-at-top
    var header_offset = parseInt(jQuery(“div.header-at-top”).css(“height”).replace(/^(\d+).*/, ‘$1’));
    // Scroll page to jsut below the header by removing the header size from the offset
    jQuery(‘html,body’).animate({
    scrollTop: target.offset().top – header_offset
    }, 1000);
    return false;`

    Cheers

    • The code is for a single page site, so it was assumed that you would have only one page. It is possible to modify the functions.php code to load the smooth scrolling JavaScript only with the homepage and on no others. I have updated the Gist file for the functions.php to reflect this, which will now appear in the blog post as well if you look.

  2. As I understand it, the “single page site” is really composed of multiple pages that are included on the home page, each preceded by a text widget containing an tag and an tag for the replacement title, and followed by a Back To Top partial layout. The top menu consists of custom links whose URL’s point to the id (#slug-name) of the inserted page. The result being a “multi page” site with all of the pages rendered on the Home page and the address in the browser never changing from http://example.com. This is exactly what I did.

    The problem was it would scroll the selected page to the top of the window, hiding the title and some of the text behind the header. The fact that the distance to scroll to the bottom of the header seems to vary between FF and Chrome may point ‘fumbled finger’ that I didn’t catch. I’ll have a look at it again later.