HyperlinkCode.com

How to create 500 totally unique, human-quality articles in just 45 seconds ..

How To Hyperlink Bookmark on the Same Page

This page shows the HTML code for making hyperlink bookmarks within the same page. This is achieved by using two different hyperlink codes. These hyperlink codes work together in pairs. One is the Go-To Target hyperlink and the other is the Destination Bookmark. Example layouts are also provided.

Hyperlink HTML Bookmark Code

Insert the following HTML code into the part of the web document you want to bookmark. See example.

Code - Bookmark Target Destination

<a name="top"></a>

Now make a hyperlink that points to the bookmark:

Code - Go-To Target Hyperlink

<a href="#top">Top of Page</a>

Output

Top of Page

Example Bookmark Layout

Code - Bookmark Target Destination

<body>
<a name="top"></a>

<a name="bookmark"></a>
<h2>Hyperlink Bookmark Code</h2>

<a name="example"></a>
<h2>Example Bookmark Layout</h2>

<a name="example2"></a>
<h2>Another Example Layout</h2>

Code - Go-To Target Hyperlink

<ul>
<li><a href="#top">Top of Page</a></li>
<li><a href="#bookmark">Hyperlink Bookmark Code</a></li>
<li><a href="#example">Example Bookmark Layout</a></li>
<li><a href="#example2">Another Example Layout</a></li>
</ul>

Output

Free web design videos! Learn the easy way to responsive (mobile friendly) web design.

Another Example Layout

Code - Go-To Target Hyperlink

<p style="text-align: center; width: 95%; padding: 15px;">
<a href="#top">Top of Page</a> |
<a href="#bookmark">Hyperlink Bookmark Code</a> |
<a href="#example">Example Bookmark Layout</a> |
<a href="#example2">Another Example Layout</a>
</p>

Output

Top of Page | Hyperlink Bookmark Code | Example Bookmark Layout | Another Example Layout

Play around with the style property values such as colors, padding, width, border sizes and box-shadow to achieve different effects.

More Hyperlink Codes

  • How to make a hyperlink.
  • How to make dashed underline hyperlink hover effects.
  • How to open a hyperlink in a new window.
  • How to change hyperlink color.
  • How to remove hyperlink underline.
  • How to make an image hyperlink.
  • How to change hyperlink underline color.
  • How to make email address hyperlink.
  • How to make a link button.
  • © Copyright 2007 - 2017 HyperlinkCode.com.
    Site Admin: Ed Zivkovic. Privacy | Terms