Making a link lead to the anchor centered in the middle of the page

Store Design
1

Hi,

I’m trying to get a link lead to the anchor centered in the middle of the page, instead of the top of the page.

The reason i’m looking for this, is that the header covers the top of the page. I’m pretty sure more Shopify users experience this problem.

Example
When just using (html):

Jump to

land here

The “land here” text can’t be seen because it’s covered by the header that moves along while scrolling.

Anyone got a solution for this?

Thanks in advance !

2

Hi @DDHH22

Can you please share shop url.

Thanks

Vishvas Mishra

3

Thanks for your reply.

It’s in library since i’m still working on it.

It’s the https://themes.shopify.com/themes/warehouse/styles/metal/preview theme.

As you scroll down, you will notice the header is following the scrolling down movement. Which covers the anchor destination.

4

I found this one the web as a possible solution, anyone got a idea how to implement it?

HTML

CSS

.anchor{
display: block;
height: 115px; /same height as header/
margin-top: -115px; /same height as header/
visibility: hidden;
}

5

Hi all,

Thanks for all the help, but i found the solution.

If your anchor is covered by your sticky header, this works.

First, go to edit code and search for theme.css.

Once found, look up (if you can’t find it in theme.css ctrl+F and search :" .anchor { " without the question marks.

.anchor {
display: block;
position: relative;
top: -75px;
visibility: hidden;

Change this in to (depending on the size of your sticky header):

.anchor{
display: block;
height: 300px; /same height as header/
margin-top: -300px; /same height as header/
visibility: hidden;

Final: close edit code.

Part 2. (on the page where your anchor is)

For each anchor, change it to

instead of

gotohere

 (or whatever your original anchor was).

It’s important to refer to the class=anchor.

You can play a little with the height and margin top.

Good luck!