CODEWITHSUNDEEP
htmlcss
user16603211
user16603211

Reputation:

Anchor links do not redirect to correct position on the webpage

A seemingly simple issue to which I can find no useful answer.

I have a web page with a long piece of text (Terms and Conditions). To make things easier for users I have broken the Ts & Cs into sections, each with a heading2 element and an opeinging paragraph into which I have inserted anchor jump to links. Above this, is a sliding sidenav element which is only visible below certain screen sizes and which is toggled using a javascript function:

<div id="mySidenav" class="sidenav">
    <a href="index.html">home</a>
    <a href="shop.html">shop</a>
    <a href="notes.html">notes</a>
    <a href="template.html">info</a>
</div>

<!-- CONTENT -->
    <div class="content" id="elemToSlide">
        <div class="generallayout">
            <h1>Terms and Conditions</h1>
                <p>
                Welcome to Dermot's Wine Shop. Our Terms and Conditions are set out 
                below, and cover <a href="#purchase">Purchases</a>,
                <a href="#delivery">Deliveries</a>, <a href="#return">Returns</a>.... etc

The CSS for the sidenav element is here:

/* SLIDING SIDENAV */
/* This element is only visible when the screen size is less than 460px */
/* It slides in from the left, displacing the main page to the right as it slides */
/* Taken and adapted from W3Schools https://www.w3schools.com/howto/howto_js_sidenav.asp*/
.sidenav {
  height: 14em;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 25vh;
  left: 0;
  overflow-x: hidden;
  transition: 0.9s;
}

Along the page I have anchors to which the links in the opening paragraph should direct:

<h2 id="purchase">Purchases</h2>
<br />...lots of boring text
<h2 id="delivery">Deliveries</h2>
<br />...lots of boring text

However, if I click on any of these links the page scrolls to a position below the anchor text - this is where it ends up if I click Deliveries in the opening para (...href="#delivery">Deliveries):

page as shown after clicking anchor link

Whereas it should be positioned at ...h2 id="delivery">Deliveries:

what page should look like

Now, the sticky header takes up 25vh of screen, but I cannot see why that should matter as I assume the page should move to the position of the linked text?

Perhaps my assumption is wrong, in which case how does one offset the page scroll to allow for this?

All the best,

Dermot

Upvotes: 2

Views: 5826

Answers (2)

user16603211
user16603211

Reputation:

Thanks to Chase and Monica J, who both identified the sticky header as being the issue. Following some of the links I ended up seeing this question on SO offsetting an html anchor to adjust for fixed header and I took the idea suggested there by Jan and JohanChopin and added an anchor class to my CSS:

.anchor {
    display: block;
    position: relative;
    top: -30vh;
    visibility: hidden;
}

and then added anchors in the HTML as shown here:

<h2>refunds</h2>
<a class="anchor" id="refund"></a>
<br />

This anchor is hidden on-screen but is where the screen scrolls to when an anchor link:

<a href="#refund">Refunds</a>

is clicked.

These modifications worked perfectly.

Thanks to all concerned,

dermot

Upvotes: 2

Monica J.
Monica J.

Reputation: 28

Without being able to see the entire screen, it sounds like your header could be the issue. The anchors are working but with a sticky header, the content will always be behind it. Padding may correct this. The padding is added to the content to account for the height of the sticky header or as Chase mentioned, using scroll padding.

Upvotes: 0

Related Questions