Linking Anchor Within Page

Route_One_Appar
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!

Jason
Shopify Expert
10360 158 2003

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.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
Route_One_Appar
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
Zaharoff
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
Ninthony
Shopify Partner
1964 296 777
<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 it and accept it as the 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
jrosen1170
New Member
1 0 0

worked perfectly!

0 Likes
Ron_Coffee
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
scottyJ
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
julie_b
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
Ninthony
Shopify Partner
1964 296 777

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 it and accept it as the 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