Using a fixed position header and name anchors in the body

Forum Moderators: phranque

Message Too Old, No Replies

Using a fixed position header and name anchors in the body

csdude55

4:21 pm on Feb 3, 2020 (gmt 0)

I have a page like this:

<header style="position: fixed; height: 100px">
 Blah blah blah
</header>

<main>
<a href="#10">Click</a>

blah blah blah

<a name="30">Results</a>
</main>

The problem here is that, with the fixed position header, the name anchor jumps up to the top 0px position instead of the 100px position. So if I tell someone to go to www.example.com/#10, the top 100px are hidden and it's confusing.

Any suggestions on how to get around that?

I'm already using jQuery so I thought this would work, but it doesn't seem to do anything:

if (
 $('header').css('position') == 'fixed' &&
 document.URL.toLowerCase().indexOf('#') !== -1
)
 $('html, body').animate({ scrollTop: 102 }, 'slow');

It passes the if() so that's not the issue, it's just that scrollTop doesn't drop it down like I expected. I also tried $('main') instead of $('html, body').

Any other ideas?

lammert

3:26 am on Feb 7, 2020 (gmt 0)

You can use CSS to set the anchor at a different position than where the text block starts:

<main>
<a class="shift" href="#10"></a>Click

blah blah blah

<a class="shift" name="30"></a>Result
</main>

And in CSS:

.shift {
 display: block;
 position: relative;
 top: -100px;
 visibility: hidden;
}

This should move the position of the anchor 100 px above the position of the anchor text.

csdude55

4:10 am on Feb 7, 2020 (gmt 0)

Awesome, thanks! I also came across another one that works, but it feels more like a hack so I worry that it might not work well long term:

.shift {
 /* where 100 is the height of the header */
 padding-top: 100px;
 margin-top: -100px
}

Kendo

4:21 am on Feb 7, 2020 (gmt 0)

padding-top: 100px;

No problems with this. I use it on all sites that use bootstrap.

csdude55

4:28 am on Feb 7, 2020 (gmt 0)

One oddity that I just found using that one, though, Kendo: it worked when I followed the link, but if I hit Refresh then it jumped around. Hit Refresh again, it jumped around again. It didn't jump by 100px, but enough that it was weird.

I didn't have that with @lammert 's code.

csdude55

8:22 pm on Feb 7, 2020 (gmt 0)

Minor update... in my case, using this as the selector worked out great:

a[name]:not([href]) { ... }

That might be a hair slower to process, but it saved me a lot of work from adding a class name to each one :-)

Kendo

12:18 am on Feb 8, 2020 (gmt 0)

if I hit Refresh then it jumped around

It doesn't jump on any of my sites. Some pages are static content and others are dynamically populated, and some have different padding due to different banners used in the header.