Categories: Marketing

How to Create a Link to Jump to a Specific Part of a Page [Quick Tip]

When most people think of links, they think of connecting two different webpages together. You use hyperlinks to connect two of your blog posts, or a blog post and a landing page, or a blog post and a product page, or a tweet to your website.

But that’s not all hyperlinks can do. With a little tweaking, you also can set up hyperlinks to link to content on the same page. So remember that really exhaustive glossary you put together on industry terms your audience should know? Now, when you refer to something you said elsewhere in that article, you can actually link to it — making it much easier for your audience to figure out what the heck you’re talking about.

Want to see what I mean? Just click here.

Pretty cool, huh? The best part about it all is that it’s super easy to do yourself, even if you don’t have extensive HTML knowledge. If the HTML-speak feels confusing, just follow along with the real-world examples below.

Here’s how you do it. 

1) Give the object or text you’d like to link to a name.

In a normal linking scenario, the thing you need to link to has a URL of its own. But in this scenario, the page you want to link to and the page the link is on is one and the same — so you’ve got to make up a name for the link’s destination.

I’d recommend using word or phrase that describes the link’s destination. If you use a phrase, there should be no spaces — use underscores instead. 

Example

Let’s say we wanted to link to an example of a company using Facebook ads in a post. Here’s what I’d use as my object’s name:

facebook_ads_example

Now, onto the next step. 

2) Take the name you’ve chosen and insert it into an opening HTML anchor link tag.

Translation: Replace the red section of the tag below with the name you chose in the previous step:

<a id=”INSERT_YOUR_OBJECT_NAME_HERE“>

Example

<a id=”facebook_ads_example“>

3) Place that complete opening <a> tag from above before the text or object you want to link to, and add a closing </a> tag after.

Doing this sets the location of link. This is what your code should look like now:

<a id=”INSERT_YOUR_OBJECT_NAME_HERE“>The object you want to link to.</a>

Example

<a id=”facebook_ads_example”>This is the Facebook ad example I want to link to.</a>

4) Create the hyperlink that’ll take you to that text or object.

Now, go to the part of the post you’d like to have the hyperlink in. You’ll need to add a typical hyperlink HTML markup, but in the part where you’d typically include a URL, you’ll include the pound symbol (#) then the name of the object you’re linking to. Here’s what it looks like:

<a href=”#INSERT_YOUR_OBJECT_NAME_HERE“>Click here to see the content below.</a>

Example

<a href=”#facebook_ads_example“>Click here to see an example of how a company uses Facebook ads.</a>

5) Voila! You’ve got a functioning hyperlink between two pieces of content on the same page.

Simple as that. 

(Hey there, curious folks from the introduction! Click here go back to where you left off.)









Source: Hubspot

Charles

Share
Published by
Charles

Recent Posts

Free Script: 3D Pre-Compose + Tutorial!

[youtube http://www.youtube.com/watch?v=2TvlE5SFaxM] I finally got tired of doing this manually, so we created a free…

3 months ago

3D Pre-Compose Script

    Pre-Compose 3D Aware effects with ease and link expressions    Great for displacement maps or isolating 3D…

3 months ago

New Tutorial: Sci-Fi Weapon FX!

[youtube http://www.youtube.com/watch?v=UWppqLrS6cU?feature=oembed&w=500&h=281] In this exciting tutorial I’ll be showing you how to create various sci-fi…

3 months ago

Sci-Fi Weapon FX

    Create a variety of futuristic weapon FX    Add Distortion and shockwaves Source: Video Copilot 2

3 months ago

New Tutorial: Shockwaves in After Effects!

[youtube http://www.youtube.com/watch?v=JYbgjCR8PMI] You don’t want to miss this in depth tutorial! Massive tips, no extra…

3 months ago

Shockwaves!

    Create a powerful shockwave effect without 3rd party tools    Fix seam issues and add particle pieces…

3 months ago