CODEWITHSUNDEEP
htmlcss
Jay
Jay

Reputation: 27474

how to make anchor tags scroll without being covered by position: fixed area

I have a page with a header at the top with position:fixed, so that it stays at the top of the screen as the user scrolls. That works fine.

In the body underneath there are anchor tags. And when you click on a link that takes you to one of these anchors, the browser displays the page with that that anchor at the very top. Even though this is under the header.

Here's a simplified page that demonstrates the problem:

<html>
<style>
  .header {
    height: 20px;
    position: fixed;
    top: 0px;
    background-color: gray;
  }
  
  .body {
    overflow: auto;
    margin-top: 20px;
  }
</style>
<div class="header">
  This is the header.
</div>
<div class="body">
  <p><a href="#10">Line 10</a> <a href="#20">Line 20</a></p>
  This is the body.<br/> Line 2<br/> Line 3<br/> Line 4<br/> Line 5<br/> Line 6<br/> Line 7<br/> Line 8<br/> Line 9<br/>
  <a name="10" /> Line 10<br/> Line 11<br/> Line 12<br/> Line 13<br/> Line 14<br/> Line 15<br/> Line 16<br/> Line 17<br/> Line 18<br/> Line 19<br/>
  <a name="20" /> Line 20<br/> Line 21<br/> Line 22<br/> Line 23<br/> Line 24<br/> Line 25<br/> Line 26<br/> Line 27<br/> Line 28<br/> Line 29<br/> Line 30<br/> Line 31<br/> Line 32<br/> Line 33<br/> Line 34<br/> Line 35<br/> Line 36<br/> Line 37<br/>  Line 38<br/> Line 39<br/> Line 40<br/>
</div>

</html>

Click on the "Line 10" link and it displays with the header, and right below the header, the first thing visible is ... line 11.

I'd like it to work so that if you click on a link for line 10, that line 10 will be visible.

Upvotes: 1

Views: 40

Answers (2)

johannchopin
johannchopin

Reputation: 14844

There is already a response to this type of problem here. It use the trick of padding-top: size; margin-top: -size;:

.body a {
  /* Adjust here the size */
  padding-top: 20px;
  margin-top: -20px;
}
<html>
<style>
  .header {
    height: 20px;
    position: fixed;
    top: 0px;
    background-color: gray;
  }
  
  .body {
    overflow: auto;
    margin-top: 20px;
  }
</style>
<div class="header">
  This is the header.
</div>
<div class="body">
  <p><a href="#10">Line 10</a> <a href="#20">Line 20</a></p>
  This is the body.<br/> Line 2<br/> Line 3<br/> Line 4<br/> Line 5<br/> Line 6<br/> Line 7<br/> Line 8<br/> Line 9<br/>
  <a name="10" /> Line 10<br/> Line 11<br/> Line 12<br/> Line 13<br/> Line 14<br/> Line 15<br/> Line 16<br/> Line 17<br/> Line 18<br/> Line 19<br/>
  <a name="20" /> Line 20<br/> Line 21<br/> Line 22<br/> Line 23<br/> Line 24<br/> Line 25<br/> Line 26<br/> Line 27<br/> Line 28<br/> Line 29<br/> Line 30<br/> Line 31<br/> Line 32<br/> Line 33<br/> Line 34<br/> Line 35<br/> Line 36<br/> Line 37<br/>  Line 38<br/> Line 39<br/> Line 40<br/>
</div>

</html>

Upvotes: 2

Dave
Dave

Reputation: 356

Explanation

This happens because when clicking an anchor the browser will jump to that anchor and align it at the top of the user window. It ignores the fixed element, because a fixed element is no longer inside the document flow.

In this case you could use a simple CSS 'trick', but that depends on if the header will stay the same. If it changes I would recommend using JavaScript OR use media queries to adjust the header correction when needed.

CSS Only

I've made an example in JSFiddle: JSFiddle example

HTML code:

<div class="header">
  This is the header.
</div>
<div class="content">
  <p>
    <a href="#anchor_a">Anchor A</a> 
    <a href="#anchor_b">Anchor B</a>
  </p>

  <div class="example-box">
   <h3 class="example-box_header">
     <span id="anchor_a" class="example-box_id"></span>
     Header 1
   </h3>
   <p>Some long list here</p>
  </div>

  <div class="example-box">
   <h3 class="example-box_header">
      <span id="anchor_b" class="example-box_id"></span>
      Header 2
   </h3>
   <p>Some long list here</p>
  </div>
</div>

CSS code:

.header {
  height: 20px;
  position: fixed;
  top: 0px;
  background-color: gray;
}

.content {
  margin-top: 20px;
}

/* Just example code: */
.example-box {
  height: 100vh;
  margin: 1vw 0;
  background-color: #d1d1d1;
}

.example-box_header {
  position: relative; /* This is needed, otherwise the anchor would not be relative to the header */
}


.example-box_id {
  width: 1px; /* 1 */
  height: 1px; /* 1 */
  display: block;
  position: absolute;
  visibility: visible; /* 1 */
  top: -20px; /* Header height compensation */
}

/* [1] To make sure to visually hide the anchor */

What it actually does is adding a extra span inside the box/header where it needs to jump to. That extra span is used as the anchor and negatively placed (top) with the height of the header.

Upvotes: 1

Related Questions