Linking Anchor Within Page

Highlighted
Tourist
5 0 1

Hi, I am having issues anchoring certain parts within a page using a hyperlink.

 

An example of this can be found here:

http://www.swell.com/c/faq.htm

 

I want to be able to put hyperlinks that either "bring to top" of the page, or to certain sections. None of the HTML is working that I am finding on Google. Any assistance appreciated!

Highlighted
Shopify Expert
10007 116 1818

If you had a link that looked like so:

<a href="#foo">Link to Foo!</a>

You would then make sure you have an element on the page with matching id. For example:

<h2 id="foo">Title for Foo!</h2>

When that link is clicked the browser will scroll to wherever that element is. 

Do you have an example page where you've tried to do this, but failed. Seeing an example might help steer you in the right direction.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Highlighted
Tourist
5 0 1

OMG IT WORKED!

 

I tried it with <a name= and <div= nothing worked, I'm still learning. Really appreciate your help!

 

0 Likes
Highlighted
Tourist
8 0 1

What about linking to another page?

Say 

<h2 id="foo">Title for Foo!</h2>

is on page "2"

 

where the hyperlink is on page "1".

 

0 Likes
Highlighted
Shopify Partner
1445 195 521
<a href="https://www.yourwebpage.com/products#foo">Link text</a>

 I believe it's the same concept but you just ad the #id to the end of the url you're using.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
Highlighted
New Member
1 0 0

worked perfectly!

0 Likes
Highlighted
New Member
1 0 0

Within your site you can also use ../ to backup one level. So if it's in yourwebpage.com/products/series you can use 

<a href="../products#foo">Link text</a>

to link to a page within the products section or ../../ to link to a page on the main domain.

Saves a lot of typing your domainname 

0 Likes
Highlighted
New Member
1 0 0

Jason, 

 

I am wanting to put several text links on my store product and collections pages but I am not proficient with HTML. Is there a way to create text and link to it ( such as an anchor) so people can click in be directed farther up or down a page?

0 Likes
Highlighted
Excursionist
29 0 6

Hi Jason,

Is it also possible link from an image to an anchor within a page ? Have tried linking an image on my homepage using https://www.julesbridaljewellery.com/pages/real-brides-reviews#Nicola">Nicola</a> 

to reach another real bride reviews page using <h2 id="Nicola">Nicola</h2>

https://www.julesbridaljewellery.com/pages/real-brides-reviews

 

Any help would be appreciated before I waste another hour trying to figure it out.

Thanks

0 Likes
Highlighted
Shopify Partner
1445 195 521

There's a mistake somewhere in your html, can't tell what it is because browsers will fix broken HTML. But you can see that there's a closing ">  

 

Here's what I see:

 

<a href="https://www.julesbridaljewellery.com/pages/real-brides-reviews#Nicola"></a>
">
<img src="https://cdn.shopify.com/s/files/1/0187/3984/files/homepage-template-nicola_a35fd2c6-609f-46e9-833c-c0895c545689.jpg?v=1580908452" alt="Real Bride Nicola" width="" height="">

So where you made this change, instead make sure it looks like this:

<a href="https://www.julesbridaljewellery.com/pages/real-brides-reviews#Nicola">
  <img src="https://cdn.shopify.com/s/files/1/0187/3984/files/homepage-template-nicola_a35fd2c6-609f-46e9-833c-c0895c545689.jpg?v=1580908452" alt="Real Bride Nicola" width="" height="">
</a>

 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D