Anchor Tag Guide (HTML + Javascript)

An anchor is a piece of text which marks the beginning and/or the end of a hypertext link. The text between the opening tag and the closing tag is either the start or destination (or both) of a link. And it is often used to redirect people within the page - e.g. click 'top' to see the top of the page.

To make it easier for you to understand, this article will use an example where you are redirected to the top of the page upon clicking on hyperlinked text 'top' located at the bottom of the page.


1. Go to landing page editor

2. Add in HTML box at the very top of the page, and put <div id="top"></div>

3. Go to the bottom of the page, and add in a textbox.

4. Click on Source, and put <a class="scroll-down" href="#top">go to Top</a>

5. Click on 'Custom Javascript' on left hand side, and paste the following javascript code: 

$(function(){

   $(".scroll-down").click(function(event) {

       event.preventDefault(); //stops browser updating url

       var id = $(this).attr("href");

       var divPosition = $(id).offset().top;

       $("html, body").animate({scrollTop: divPosition});

   });

})


Now, in the live campaign page, upon clicking 'Go to Top' hyperlinked text at the bottom of the page, you will jump to the top of the page.


How did we do?