Here’s my HTML tips on how to:
- Create anchor points so you can jump from one position to another on the same page
- Jump from one position on one page to any position on another page (on the same site or another site you own)
Anchor points, scroll points or HTML bookmarks as some call them, make it possible to jump from one point on a page to another position on the same page by clicking a link.
You can also jump from any point on any page to another position on another page and even to another position on another site.
Click this link to see what i mean (this link will take you to the middle of the page on another page, on this site)
This helps with fast scrolling points from a link to a specific location on your website.
Creating hypertext anchor point links on the same page/post
- Paste the 1st line of HTML from the following Gist where you want the link.
- Paste the 2nd line of HTML where you want the anchor point destination.
HTML Anchor Point Using PHP Code #
Step 1 – Add the following code to your child themes functions file.
There’s 2 steps :
Step 2 – Add the following HTML to your editor or anywhere else you want your link to “jump to”.
<a name="recipe"></a>
This code adds the JUMP TO RECIPE link before the content on all single posts.
Adjust the is_singular( 'post' )
conditional tag to control where the link outputs.
Create Anchor Points With Plain Text Links
You can also insert a link which leads to another position on a different page without needing to create a clickable link.
Example: http://wpsites.net/your-download-getting-started-with-wordpress/#Install-wordpress
Simply insert the page url which contains the anchor (<a name=”Install-wordpress“></a>) and add the anchor text on the end starting with #
The orange html code is the anchor you place in any position in any page using your HTML editor.
In other words all you are doing is adding #Install-wordpress to the end of the page url you wish the link too.
http://yourdomain.com/page-which-your-link-arrives-at/#Install-wordpress/
- Replace the blue text with any text you like as long as they are exactly the same purple text.
- Replace the green text with the url of the page you want the link to arrive at
Scroll to Footer
This HTML enables you to create a link to your footer which, when clicked, takes you to the footer of any Genesis child theme.
Was This Tutorial Helpful?