{"id":361,"date":"2022-10-12T22:06:33","date_gmt":"2022-10-12T22:06:33","guid":{"rendered":"https:\/\/help.virtualcu.net\/?p=361"},"modified":"2022-10-12T22:09:03","modified_gmt":"2022-10-12T22:09:03","slug":"how-to-create-anchor-links-example","status":"publish","type":"post","link":"https:\/\/help.virtualcu.net\/?p=361","title":{"rendered":"How to Create Anchor Links example"},"content":{"rendered":"<h2 id=\"your-anchor-link-id\">Example Heading<\/h2>\n<p>&lt;h2 id=&#8221;your-anchor-link-id&#8221;&gt;Example Heading&lt;\/h2&gt;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>What Are Anchor Links?<\/strong><\/p>\n<p>An anchor link is a link (or hyperlink).\u00a0 The anchor element (represented as the a tag) is common for all links (term \u201cjump link\u201d) is a link that jumps to a specific element on a page. So the main difference between anchor links (or jump links) and regular links is the destination.<\/p>\n<p>Traditional hyperlinks send users to a page while anchor links send users to a specific section of a page. Anchor links can link to a section on the same page or to a section of a different page.<\/p>\n<p>There are two major components that make an anchor link work.<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>\n<h5>An element with a specific anchor ID (the anchor). This is the element you wish to jump to on the page.<\/h5>\n<\/li>\n<li>\n<h5 id=\"link-anchor-link-id\">A Link to the element with the corresponding anchor ID (the anchor link). This link will \u201cjump\u201d to the anchor element wherever it is on the page.<\/h5>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2 id=\"your-anchor-link-id\"><\/h2>\n<p>With this, we can create an anchor link that jumps to this heading element. The key to an anchor link is the unique href attribute value.<\/p>\n<p>Instead of a normal URL, <strong>you must include a pound sign \u201c#\u201d before the corresponding anchor ID<\/strong>.<\/p>\n<hr \/>\n<p style=\"text-align: center;\"><strong>Scroll Down<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h1 style=\"text-align: center;\"><strong>Examples of Anchor Links<\/strong><\/h1>\n<p>&nbsp;<\/p>\n<p><a href=\"#your-anchor-link-id\">Click Here to Jump to Heading<\/a><br \/>\n<span style=\"color: #3366ff;\">&lt;a href=\u201d<strong>#<\/strong>your-anchor-link-id\u201d&gt;Click Here to Jump to Heading&lt;\/a&gt;<\/span><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<p><a href=\"#link-anchor-link-id\">Click here to jump to &#8220;A Link to the element&#8221;<\/a><br \/>\n<span style=\"color: #3366ff;\">&lt;a href=&#8221;#link-anchor-link-id&#8221;&gt;Click here to jump to &#8220;A Link to the element&#8221;&lt;\/a&gt;<\/span><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<p>Also, if you wanted to add an anchor link to a specific section of an external page, you would need to include the URL of the page before the anchor ID as follows:<\/p>\n<p><a href=\"https:\/\/website.com\/page\/#your-anchor-link-id\" target=\"_blank\" rel=\"noopener\">Anchor Link<\/a><br \/>\n<span style=\"color: #3366ff;\">&lt;a href=&#8221;https:\/\/website.com\/page\/<strong>#<\/strong>your-anchor-link-id&#8221;&gt;Anchor Link&lt;\/a&gt;<\/span><\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Example Heading &lt;h2 id=&#8221;your-anchor-link-id&#8221;&gt;Example Heading&lt;\/h2&gt; &nbsp; What Are Anchor Links? An anchor link is a link (or hyperlink).\u00a0 The anchor element (represented as the a tag) is common for all links (term \u201cjump link\u201d) is a link that jumps to a specific element on a page. So the main difference between anchor links (or jump ..<\/p>\n<div class=\"clear-fix\"><\/div>\n<p><a href=\"https:\/\/help.virtualcu.net\/?p=361\" title=\"read more...\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[191,192],"tags":[],"class_list":["post-361","post","type-post","status-publish","format-standard","hentry","category-all","category-tips-and-tricks"],"_links":{"self":[{"href":"https:\/\/help.virtualcu.net\/index.php?rest_route=\/wp\/v2\/posts\/361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.virtualcu.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/help.virtualcu.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/help.virtualcu.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/help.virtualcu.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=361"}],"version-history":[{"count":5,"href":"https:\/\/help.virtualcu.net\/index.php?rest_route=\/wp\/v2\/posts\/361\/revisions"}],"predecessor-version":[{"id":368,"href":"https:\/\/help.virtualcu.net\/index.php?rest_route=\/wp\/v2\/posts\/361\/revisions\/368"}],"wp:attachment":[{"href":"https:\/\/help.virtualcu.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/help.virtualcu.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/help.virtualcu.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}