Add Scroll To Buttons To Your Page in X Theme

Jon @ WP Templates Technical, Tutorial

Today you are going to learn how to make buttons that scroll to a specific section on the current page. You don’t need any fancy code to do this so it’s going to be super simple to set up.

If you haven’t had the good fortune to see what X Theme is all about, check out this quick introduction to it.

On the No Glory template, you will see these in action from the buttons on the right of the header.

So, How do you achieve this?

2 step process

There are 2 simple parts to achieving this. First is the button or link that will be clicked and the second is telling the web page which section to scroll to when the button is clicked.

The technical bit, if you are interested, is it’s done with HTML tag ids. You then link to those specific tag ids with an anchor tag by specifying the id that you want to go to.

On a plain HTML website, the page will “jump” to the section. In X Theme you get a nice smooth scroll which is far more user-friendly.

Ok, so on to the making bit…

Step 1 – Create your button

Step one is to create the button or link that you want to be clicked.

There are multiple elements that give you the option to add in a link and these are:

  • Button
  • Icon List
  • Feature Box
  • Text

For this example, I want to go through adding an Icon List. Having a single one makes for a great looking alternative for a button.

 

Add in an icon list element, then click on it when the blue box is highlighting it.

On the left you need to change 2 things other than the label and icon:

  1. Make sure LINK is set to ON.
  2. Keep the # in the URL section and after it add the section name (we’ll come to that in a bit) that you want the click action to go to. i.e. #tothissection

Click save to keep your changes.

Step 2 – Label the section

Next step is to mark the section you want the click to take you too. X Theme makes this super easy.

Just scroll over the section that you want to edit, when the blue box highlights it, click it.

 

Depending on your version of X Theme, you will either scroll to the bottom of the left editor panel to find the ID section, or like in the screenshot example, you’ll go to the CUSTOMIZE section.

In either, in the ID input box you want to add: tothissection

NOTE: There is no # when we add it here. This is really important.

Click save to keep your changes.

Done.

Easy right? Now when you go to the page you just edited, you’ll scroll to the section you labelled when you click the button you created.

This is really useful when you have a page full of really long text. Say you have written a super long blog post that is really informative, but scrolling to specific sections takes 3 scroll buttons and a lot of wrist ache!

Add in a small table of contents at the top and add in these internal scroll links to make navigating that single page really easy.

Long pages of informative text are really good for your SEO but making it user-friendly to navigate is also going to do wonders for your customers experience on your site.

Useful links