{"id":11640106,"date":"2019-06-15T05:07:28","date_gmt":"2019-06-15T05:07:28","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&#038;p=11640106"},"modified":"2023-07-25T13:33:33","modified_gmt":"2023-07-25T13:33:33","slug":"page-jumps","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/page-jumps\/","title":{"rendered":"Page Jumps"},"content":{"rendered":"\n<p>Page jumping, also sometimes referred to as anchor links, is where you click a link and instantly get moved somewhere further up or down a page. This can be particularly useful with a long page. <\/p>\n\n\n\n<p>One way to enable this is by setting an HTML Anchor to a Heading block on your page and creating a link that jumps to the anchor. <a href=\"#useful-hint\">You can even jump to another page&#8217;s anchor<\/a>.<\/p>\n\n\n\n<p>This can also be accomplished with any other block that allows for an HTML Anchor to be set under &#8220;Advanced&#8221;. You can review which blocks have the HTML anchor field by reviewing the <strong><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/core-blocks\/\">Core Blocks Reference<\/a><\/strong> and looking for blocks with the <code>anchor<\/code> attribute.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls muted src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/10\/Page-Jumps-HelpHub-Oct-2022.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Create an HTML Anchor<\/h2>\n\n\n\n<figure class=\"wp-block-image alignright size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"279\" height=\"847\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/10\/190138307-c7915fea-353c-44a1-9056-a07a3af12790.png\" alt=\"Where to add an HTML anchor for a block (Heading block) under Block settings.\" class=\"wp-image-16143858\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/10\/190138307-c7915fea-353c-44a1-9056-a07a3af12790.png 279w, https:\/\/wordpress.org\/documentation\/files\/2022\/10\/190138307-c7915fea-353c-44a1-9056-a07a3af12790-99x300.png 99w\" sizes=\"auto, (max-width: 279px) 100vw, 279px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Use the Plus Icon to add a new block.<\/li>\n\n\n\n<li>Select Heading as the block type, or start typing <code>\/heading<\/code> as a shortcut (slash command) to the heading block.<\/li>\n\n\n\n<li>Enter your heading text. You may leave blank in heading text if you do not want to display any text.<\/li>\n\n\n\n<li>On the right side under Block Settings, click on Advanced.<\/li>\n\n\n\n<li>Type a word that will become your link into the HTML Anchor field.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">HTML Anchor Syntax<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HTML Anchor must be unique within a document.<\/li>\n\n\n\n<li>HTML Anchor is case-sensitive.<\/li>\n\n\n\n<li>HTML Anchor can include following symbols: hyphen(-), underscore(_), colon(:), period(.). It cannot include space.<\/li>\n\n\n\n<li>HTML Anchor must start in the alphabet.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Link to your HTML Anchor<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Type some text, or add an image or button that will become what you want your visitors to click on to go to another section.<\/li>\n\n\n\n<li>Highlight the text, image or button, and select the link option from the block\u2019s toolbar.<\/li>\n\n\n\n<li>Type in the HTML Anchor you created, starting with the pound (#) symbol. For example, if you created an Anchor named important-notice you would link to #important-notice.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"761\" height=\"340\" src=\"https:\/\/wordpress.org\/documentation\/files\/2022\/10\/190138761-276173ca-c970-4834-90fd-d4ee23a90218.png\" alt=\"How to add a link that jumps internally on the page to an HTML anchor.\" class=\"wp-image-16143859\" srcset=\"https:\/\/wordpress.org\/documentation\/files\/2022\/10\/190138761-276173ca-c970-4834-90fd-d4ee23a90218.png 761w, https:\/\/wordpress.org\/documentation\/files\/2022\/10\/190138761-276173ca-c970-4834-90fd-d4ee23a90218-300x134.png 300w\" sizes=\"auto, (max-width: 761px) 100vw, 761px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"useful-hint\">Jumping to an anchor on another page<\/h3>\n\n\n\n<p>If you want to jump to another page&#8217;s anchor, then specify URL with HTML Anchor. For example, <code>example.com\/anotherpage#important-notice<\/code><\/p>\n\n\n\n<div class=\"wp-block-group changelog has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"background-color:#e0e0e0\">\n<h2 class=\"wp-block-heading has-medium-font-size\" id=\"changelog\"><strong>Changelog <\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>2023-07-25\n<ul class=\"wp-block-list\">\n<li>Update video URL<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>2022-10-28 \n<ul class=\"wp-block-list\">\n<li>Added a little more information about Page Jump Links use cases and other available blocks<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Removed a note about jump links not working in Preview mode<\/li>\n\n\n\n<li>Added Video walkthrough of Page Jumps<\/li>\n\n\n\n<li>Updated screenshots through WordPress 6.0<\/li>\n\n\n\n<li>Updated Alt text for images<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Created 2019-06-15<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Page jumping, also sometimes referred to as anchor links, is where you click a link and instantly get moved somewhere further up or down a page. This can be particularly useful with a long page. One way to enable this is by setting an HTML Anchor to a Heading block on your page and creating [&hellip;]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","category":[80,88],"class_list":["post-11640106","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-design-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11640106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=11640106"}],"version-history":[{"count":3,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11640106\/revisions"}],"predecessor-version":[{"id":16357675,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11640106\/revisions\/16357675"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=11640106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=11640106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}