Have you ever seen one of those fancy navigation menus that smoothly scrolls down the page when you click a link? Or that instantly jumps down the page to another section?

I bet you asked yourself “How did they do that?”

Well, we have the answer, let’s take at look how you can implement it quickly on your web pages.

In today’s OptimizePress university post, we are going to guide you through creating a scrolling and instant jumping navigation menu.

A few of you have asked if this is possible after seeing our CSS hacks post and AWeber website teardown, so we wanted to show you the easiest way to create the menu.

The benefits of this scrolling menu are:

  • A better user experience – by providing clear links to relevant content it’s easy for the user to navigate the page.
  • Fast loading content – because the content is on one page it appears instantly after clicking a link.

Some companies use these styles of pages for the entire website. There are times when I’ve visited a site and assumed I was navigating different pages before I realised I was on one page.

 

After following this tutorial, you will be able to add the scrolling styles menus to any of your existing landing pages.

Here is what you will learn in this blog post:

  • How to build a smooth scrolling menu
  • How to build an instant jumping menu

Let’s get started.

What You Need

Believe it or not, everything you need is already inside OptimizePress. Here is what you need and how to get it.

  1. The Javascript code –  This creates the animated scroll effect.
  2. The link URL – This tells the clickable link where it should go.
  3. The anchor link – The point on the page where the scroll effects stop.

Here’s where you get all the code.

Step 1

Firstly create a new page and choose the Long Form Landing Page. If you do not see this template, ensure you are using the latest version of OptimizePress and check the members area where you can download it in the Downloads > Extra Downloads section.

A Great User Experience with Smooth Scrolling Menus | Long Form Landing Page Template

Step 2

Next edit this arrow button show here:

A Great User Experience with Smooth Scrolling Menus | Add Arrow Scroll Button

Grab the link URL #section2 (don’t worry that it says number 2 you can easily change this later).

A Great User Experience with Smooth Scrolling Menus | Add Section Destination URL

Step 3

Next you need to grab this piece of code:

A Great User Experience with Smooth Scrolling Menus | Copy Section ID

To do that simply edit the row:

A Great User Experience with Smooth Scrolling Menus | Open Edit Menu

Step 4

Copy the the HTML <a id=”section2″></a> as shown below.

A Great User Experience with Smooth Scrolling Menus | Add Page Anchor Code

Step 5

In the LiveEditor you next go to Page Settings > Other Scripts and copy this piece of Javascript shown here:

A Great User Experience with Smooth Scrolling Menus | Copy Script

 

That’s it! DONE!

Save all the code into a text file, Evernote or somewhere you can easily access it later.

You now have all the HTML links and scripts you need to start building your scrolling menu on any other landing pages and sale pages.

Smooth Scrolling Menu & Jump Menu Video Tutorial

Watch this video and learn how we built the smooth scrolling and jumping menus.

[video_player type=”youtube” youtube_remove_logo=”Y” youtube_force_hd=”hd720″ width=”630″ height=”354″ align=”center” margin_top=”0″ margin_bottom=”20″]aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj1RQmI4ZzdkS0lSRQ==[/video_player]

How To Build The Smooth Scrolling Menu

Now onto making the actual navigation menu and creating our anchor links. Here’s how we did it on the same Long Form Landing Page, remember the Javascript code is already installed on this page so I left that step at the end.

Step 1

First we added a 4 column row:

A Great User Experience with Smooth Scrolling Menus | Add New Row

Step 2

Now we are going to create the navigation links or menu.

To do this, I added in the Headline element, added my headline text Section 1 and made the text a link.

A Great User Experience with Smooth Scrolling Menus | Create Link

The text link URL is the same code from earlier #section1 – Section 1 is where I want my page to scroll to (notice I changed it from #section2 to #section1).

A Great User Experience with Smooth Scrolling Menus | Add Section Destination URL

Step 3

Once I had created the first heading (Section 1), I created three more text links to make my navigation (Section 2, Section 3, Section 4).

I’m only using the word Section for example purposes. Yours would be something like About Us, Contact, Location or whatever section you included on your marketing page.

A Great User Experience with Smooth Scrolling Menus | Section Scrolling

Again my navigation menu is for this tutorial; you would style yours any way you wanted.

Step 4

Next I copied the anchor code <a id=”section2″></a> and pasted the same piece of code into each row where I wanted my links to scroll to.

A brief linking explanation if you are a little confused.

The links we made in our navigation menu scroll down to each section on the page.

  • The Link URL #section1 goes to <a id=”section1″></a>
  • The Link URL #section2 goes to <a id=”section2″></a>
  • The Link URL #section3 goes to <a id=”section3″></a>
  • The Link URL #section4 goes to <a id=”section4″></a>

If you created your link URLs and section names it may look like this:

  • The Link URL #aboutus goes to <a id=”aboutus”></a>
  • The Link URL #contact goes to <a id=”contact”></a>
  • The Link URL #location goes to <a id=”location”></a>
  • The Link URL #workshop goes to <a id=”workshop”></a>

Go it…?

OK …Let’s continue.

So the first row I edited became <a id=”section1″></a> the second row <a id=”section2″></a> and so on.

To do this, I edited each row, pasted the code into the Code before row field. Remember this is the same place we copied the code from earlier. This is how it looked for section two:

A Great User Experience with Smooth Scrolling Menus | Add Page Anchor Code

Here’s how my page looked (in LiveEditor mode) after I added the anchor code for each row, this example only shows the first three section links:

A Great User Experience with Smooth Scrolling Menus | Add Page Anchor

Step 5

The last step would be to paste the Javascript code to Page Settings > Other Scripts > Footer – the same place we copied it from.

If you are using the Long Form Landing Page, you wouldn’t need to do this step as the code already exists.

Only do this if you have created a NEW page.

If you followed all the steps above you will have a nice smooth scrolling menu on your pages. If you are stuck with anything, watch the video above for more details.

How To Build The Instant Jumping Scrolling Menu

To see the jump menu on action skip to 7:15 in the video above.

If you followed the tutorial above and built your smooth scrolling menu you will find this nice and easy.

Firstly you DO NOT need any Javascript code for this menu.

Secondly follow steps 1-3 for How To Build The Smooth Scrolling Menu then return here.

Step 4

Next you will need to add the anchor code into each row where you want the link to jump to.

Now rather than using <a id=”section1″></a> in our Code before row field we are going to use:

<a name=”section1″></a>

Notice the text name and NOT id is being used.

A Great User Experience with Smooth Scrolling Menus | Add Page Anchor Code

Once you have done each row your page should look like this in the LiveEditor view:

A Great User Experience with Smooth Scrolling Menus | Add Page Anchor

And hey presto you have yourself a simple jumping style navigation menu!

Easy right?

You might want to use this style of navigation alongside your logo. To do that simply create a new row that allows room for a logo like this layout:

A Great User Experience with Smooth Scrolling Menus | Menu Logo Layout

Add your links as we done above and add the image element for your logo so it would look like this:

A Great User Experience with Smooth Scrolling Menus | Menu Section Scrolling

You could also make a sticky navigation with the code from our CSS hacks post.

There you have it, two different navigation styles you can include on your OptimizePress pages.

Have fun with this and look out for this months teardown video.

[feature_box_creator style=”1″ width=”” top_margin=”” bottom_margin=”” top_padding=”” right_padding=”” bottom_padding=”” left_padding=”” alignment=”center” bg_color=”#F3F3F3″ bg_color_end=”” border_color=”#CBD2D6″ border_weight=”1″ border_radius=”” border_style=”dotted” ]

Tell Us What You Think – Please Comment Below!

As always we love to hear your comments or questions. Would you like to see more of these shorter OptimizePress tips?

[/feature_box_creator]

 


    52 replies to "A Great User Experience with Smooth Scrolling Menus in OptimizePress"

    • Gina Hiatt, PhD

      Could you create a video screenshare so we can watch you do this? Optimize Press is not meant just for coders, right?

    • Aldo Scully

      Ah ta que legal! Coloca a imagem do codigo e não dá pra copiar o codigo. Afff

    • Maestros de Vida

      How can I add a scroll back to top button in optimizepress like the one you have here?

    • Is it just me or did smooth scrolling stop working with this latest update? 🙁

      • Leonardus Chang

        Not just you, it is stop working since WP last update 🙁

    • Indio John

      Can you provide code on git or somewhere else.

    • Conscious Webpreneur

      Can you please post the smooth scrolling code in a format that can be copied?
      Thanks!

    • Conscious Webpreneur

      Will this work with the top menu of a page as well?
      I followed all the steps and for some reason, it isn’t scrolling smoothly.

    • Fernanda

      you didn’t include the code in a way we can copy it… 🙁

    • Ramiro

      I copied the code. Used the “name” tag and it is still scrolling, not jumping. What should I change? I do notice that when I remove the javascript is does jump by default, but I don’t want the url to change

    • Alan

      I am sorry but you guys need to pay more attention to the user experience.

      Why did you not include the code in a way so that it could be copied and pasted?

      Because you want people to upload the templates?

      Well,

      1. It’s not about you

      2. Uploading templates is buggy as hell

      Please can you reply with the code in the comments or update your blog?

      • KM Lee

        @disqus_UAHGYDCYaz:disqus if you’re having issues uploading the Long Form template to your site, you can do a quick Google search for ‘OptimizePress smooth scrolling’. I’ve actually shared the code snippet in my blog for a while. hope that helps.

        • Amy Taylor

          Your post is an awesome additional resource for this – just used it to correct the jumping to scrolling. Thanks so much!

    • Christiaan Akkermans

      Unfortunately I get an error when uploading the template. How do I solve this error:

      Internal Server Error

      The server encountered an internal error or misconfiguration and was unable to complete your request.

      Please contact the server administrator and inform them of the time the error occurred, and the actions you performed just before this error.

      More information about this error may be available in the server error log.

      • David Frosdick

        Hi Christiaan, please contact our supper team who will help troubleshoot. It’s probably an upload size restriction or plugin conflict.

    • David Frosdick

      Thanks for the fix 😉

    • David Frosdick

      That’s excellent. It’s does add a nice touch to an already great page.

    • RB

      Where do I find the ‘long form landing page’ – it is not included in my list of templates.

      • David Frosdick

        You need to reset your content templates in the OP dashboard. Backup any custom templates you have previously uploaded as they will be lost.

        • RB

          Thank you, worked perfectly!

        • Pat Graham-Block

          David, I have added Presets to use in the Page Builder. Are those considered “custom templates” you mentioned?

    • John Vivian

      Thanks for the tips.

      In future, however, please post code that we can copy and paste rather than just screenshots.

      • David Frosdick

        Hi John, all the code is in the templates. We want to encourage people to learn where to find the code and copy it, rather than having to simply come back and find a blog post 🙂

        • RB

          Where can I find the template to download?

        • John Vivian

          Understood, but consider the user experience.

          You’re providing code examples in your blog anyway, so it’s frustrating to then have to dig around in templates for something that’s right in front of me.

          Further, i might want to use the code in an existing page and digging through a template for code is a pain and a waste of time.

          If you’re leading people to a blog post with code example, it’s pretty standard to make the code examples easily accessible.

    • Ethan Nguyen

      These tutorials are fantastic! Been reading them for a while now and I just had to leave a comment to let you know. Please keep them coming. So glad I purchased OP2!

    • stressebookllc

      Awesome, it would be nice to include the “Scroll to the Top” image as well… at the bottom right of the target rows.

    • Stephen Whiting

      Awesome, thanks for this! It’s exactly what I was trying to work out a few days ago. My page now looks great with the smooth scrolling!

      • David Frosdick

        That’s great to hear Stephen. Thanks for letting us know!

    • RB

      Hip hip hooray! I’ve been wanting to use something like this!

    • Hossam

      Nice tutorial, David. What I really want to see is a nice hack to make sticky resizable header on scrolling. You know, those sticky navigation headers that get smaller when the user scrolls down. That and this smooth scrolling menus plus a 3rd party way I found to make scrolling backgrounds would be the trinity of a great web 2.0 site layout.

      • David Frosdick

        I know a couple of themes that shrink the nav on scroll, I personally find those distracting but not sure how many other people would like them.

        I think they are a little more out of line with the features we want to add at this time. Not saying they wont be added in future.

        • Hossam

          Can you share their URLs or their names?

    • Tom Gufler

      Very good – will implement this – QUESTIONS:

      Is there a way to have the “menu” (section 1 , 2, 3, 4) sticky to the top to see all the time – so you can immediately navigate through the hole site without scrolling all the way back to the top before clicking the next section ?

    • Alan Mosko

      That’s cool, but already use and teaching to do this months already. But the really cool Optimizepress position themselves now.
      😀

    • Isabella

      Cool! Thank you, great tool!

    • Rich Farina

      Awesome David! So many great things we can do with OP 2.0… of course with your ingenuity and talent. Great job!

      • David Frosdick

        Thanks Rich!! Lots more coming and the next teardown will be in a few days.

Leave a Reply

Your email address will not be published.