Search the Support Center

How to create anchor links


This is an advanced tutorial. If you’d like to try this out, it’s important to have some basic knowledge of HTML and CSS coding. You can find out more details here.

Use an anchor link to link to a specific spot on a page. Anchor links are useful when you're linking to a long page on your site and don't want someone to have to scroll to find a specific location. 


Follow the steps in this article to learn how to create anchor links. In our example, we're creating a Frequently Asked Questions page with links from various questions to their answers. 


Please note that this is an advanced tutorial, and does require the use of some HTML coding. We're happy for you to give it a try if you'd like to do so, though we do not provide any direct support to coding related enquiries. 


Step 1

First, create one Text element with several questions, then create a separate Text element with the answers. Add one question and one answer per line. 

Step 2

Now we're going to create anchors for each answer so that we can link directly to each of them.


Click the Text element that contains the answers to edit it. Click the HTML icon in the top right corner of the Text Editor. You'll see that each of the answers you created is between a <p> and a </p> tag. Create a unique id for each of the <p> tags as in the screenshot below. 


Step 3

Next, we'll create the links that go from the questions to the answers.


Click the Text element that contains the questions to edit it. Click the HTML icon in the top right corner of the Text Editor.


We're now going to wrap each question with <a> and </a> tags. Make sure to put the <a> and </a> tags within the <p> and </p> tags, like this: <p><a>Your question text here</a></p>


Next, we're going to add a bit of extra code to the <a> tag so that it links to the anchor that we created in Step 2. In the following example, we use answer1, which you should replace of whatever anchor id you used in Step 2


<p><a href="#answer1">Your question text here</a></p>


Click Update and then Save the Text element. 



You can now add links to anchors directly in the main navigation menu. To do this, go into Edit Navigation to add an item and select the link icon. Then type in /#AnchorName. This feature is only available for JimdoPro and JimdoBusiness users.


In the image below we used <li> and </li> instead of <p> and </p> because our questions were in a list (<li> stands for list item) rather than a paragraph(<p> stands for paragraph).

Your anchor links have now been set up. Scroll to the bottom of your page and hit View, then click on one of your anchor links to see how you are taken directly to the text on the page where you created an anchor. 



You can link from a page directly to an anchor on another page. First, navigate to the page of your site that contains the anchor link, click View at the bottom of the page, and copy the URL from the address bar, e.g. To link to an anchor that you've created on this page, simply add #anchorname to the end of the link, replacing anchorname with the name you gave the anchor, e.g.


To add a smooth scrolling effect anchor links, copy and paste the following code into your Settings > Edit Head area:

<script src="//" type="text/javascript"></script>

<script type="text/javascript">


        $(function() {

          $('a[href*=#]:not([href=#])').click(function() {

            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

              var target = $(this.hash);

              target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

              if (target.length) {


                  scrollTop: target.offset().top

                }, 1000);

                return false;