Solved

Jump scroll links

  • 9 February 2023
  • 1 reply
  • 522 views

Badge +2

Where can I find a CSS or a HTML module box or like it, so i can create jump scroll internal anchor links in an email. Content heavy mails really need this feature so readers can quickly jump to any section of the newsletter. I can’t find it in Klaviyo.

icon

Best answer by Ashley I. 9 February 2023, 17:16

View original

1 reply

Userlevel 6
Badge +34

Hi @Copenhagen Float ,

Welcome to the Community! 

This is a great question. Generally, it is recommended to keep the word count of a single email to 150 words or below. However, I can certainly see where you may have a need to deliver longer content pieces that may be easier to navigate using anchor links!

There is an excellent tutorial posted to the Community here that talks about how to add a table of contents to an email campaign that includes anchor links:


In your use case, you can choose to add a similar Table of Contents section that can be used to jump down to the different subheadings in your newsletter. 

The above thread shows screenshots for how to find and change the Source code in the Classic Editor, but if you are using the New Editor, you can still find the Source code in the sidebar, per below:

From here, you can follow the steps provided in the tutorial...

To add a table of contents to your emails, follow these three steps: 

  1. Create your table of contents using anchor links 
  2. Apply the anchors to your email content 
  3. Test your links

Step 1: Create your table of contents

In the template editor, drag a text block into the top of your message. Add each section title to a new line. 

Once you’ve added the text, click Source to open up the source code for the block. You’ll need to surround each section title with this code: 

<a href="#section_one">Section 1</a>

Make sure to replace “section_one” with a unique name for your section. Your recipients won’t see this unique name. It should be all one word, with no spaces (but dashes and underscores are fine). Replace “Section 1” with your first section title, then repeat the process for all other sections. In the end, your table of contents code should look like this: 

Step 2: Apply anchors to your sections

Find your first section title in the email and open its source code. Surround the title with code like this: 

<a name="section_one">Section 1 Title</a>

Make sure to replace “section_one” with the exact same text you used in the code above.

Repeat for all your sections! Once you’ve added them all, it’s time to test. 

Step 3: Test your links

Use the preview button to send your message to yourself. If everything is set up correctly, you’ll be able to click each table of contents link to jump to the matching section. If it isn’t working, double check that you’re using the matching anchor names in the table of contents and the relevant sections. 

Note that anchor links are not supported for all email apps and device types. For example, anchor links in emails will not work in the Apple Mail iOS app, Gmail’s iOS app, or Outlook for MacOS. 

Pro tip: 

If you don’t want your section titles to have link formatting, you can put all of the section anchor code immediately before the section title. So, instead of using this code: 

<a name="section_one">Section 1 Title</a>

You can use this code:

<a name="section_one"></a>Section 1 Title

Note that this only works for the section titles code. The table of contents items must be surrounded by the code tags, or they will not work. 

 

---

Hope this helps!

-- Ashley Ismailovski

Reply