Create a Scroll-to-Next Section Button

Create a Scroll-to-Next Section Button

A popular feature that's used by many sites is full height. It's applied on certain sections/rows to create a clean, simple design. However, although it looks nice, this feature requires you to scroll through your site to ensure that your visitors does not miss any information. A technique used to encourage users to continue to scroll, is by adding a scroll-to-next button. This could be an icon, an image, or just a plain arrow down button. We've made this tutorial to showcase how you can create your own scroll-to-next section button on any row on your site using the Themify Builder plugin or any Themify theme. And we're going to replicate how we inserted the arrow down icon on the Simple theme demo as the main example.

Step 1:

  • Visit the page on the frontend, click "Turn On Builder"
  • On the second row, enter the Row Anchor Name (eg. enter "products" as row anchor name)

step 1

Step 2:

  • On the first row, drop in an "Icon" module
    • Select the desired size and Icon Background Style
    • Insert the icon and enter the row anchor link (eg. #products)
    • Optional: click on Animation tab and select a desired animation effect

step 2

More Examples:

Below are some nice showcase sites with full height section incorporated with scroll to next section button.

  • design by atlantis site Project:Design by Atlantis
    Base Theme: Ultra
  • fresh canvas Project: Fresh Canvas
    Base Theme: Landing
  • The Crazy Travel Project: The Crazy Travel
    Base Theme: Infinite
  • Pitch Vantage Project: Pitch Vantage
    Base Theme: Corporate


  1. Bob Griner
    Mar 22, 2017 @ 18:43

    Love this Hogan, but I was looking to create an arrow at the end various sections that would scroll back to the top. Exactly like the arrow does in the footer.

    I tried to create a new row with an icon, and link= header. No luck. I’m sure it’s similar to that, but I’m missing a key element.


  2. Sarah
    Sep 21, 2017 @ 21:01

    The demo links provided have been replaced by spam redirects. Check your site for malicious code.


    • Kurt @ Themify
      Sep 22, 2017 @ 12:48


      Thanks for reaching out to us :) Please know that we’ve removed the sample site that was causing the spam redirect.


  3. Penny
    Dec 04, 2017 @ 09:36


    Is there anyway of creating a anchor within the tabs module?

    So say you have 3 tabs, tab 1, tab 2 and tab 3. Lets say tab 3 is really long, so you create some sub headings at the top of the tab, which hyperlinks to different sections of the tab?


    • Kurt @ Themify
      Dec 04, 2017 @ 20:04

      Thank you for your suggestion. This is very interesting. Let us discuss it with our dev team. For now, do you have any sample site layouts that may have this feature?


      • Tim
        Aug 22, 2018 @ 15:23

        See we would link from the who we are page to make the tab that matches the sub organization be active.


  4. Cesar
    Dec 28, 2017 @ 16:03

    Hi, is there a way to do the same but from the menu? For instance, I click on one of the options from the menu but it scrolls down to an specific row. Thanks!



Themify 7.5 has released! Please read the update notes.