How to Avoid Scroll on Hashed A Tag Click with Fixed Height Content

Question

I am currently encountering a tricky issue with hashed anchor links. Here is a simple representation of my HTML code :

<div class="main-wrap">
<header></header>

<aside>
    <nav>
        <ul>
            <li><a href="#article1">Article1</a></li>
            <li><a href="#article2">Article2</a></li>
            <li><a href="#article3">Article3</a></li>
        </ul>
    </nav>
</aside>

<section>
    <article id="article1">Content Here</article>
    <article id="article2">Content Here</article>
    <article id="article3">Content Here</article>
</section>

<footer></footer>

and the CSS :

body{overflow: scroll;}

.main-wrap{
    overflow: hidden;
    position: relative;
}

header{
    position: relative;
    z-index: 3;
    height: 10vh;
}

aside{
    position: fixed;
    width: 22%;
    height: 84vh; /* Equal to 100vh - (header + footer)vh */
    top: 10vh;
    left: 0;
    bottom: 6vh;
}

section{
    position: relative;
    min-height: 84vh; /* Equal to 100vh - (header + footer)vh */
    width: 78%;
    left: 22%; /* Equal to aside width*/
}

footer{
    position: relative;
    z-index: 3;
    height: 6vh;
}

I've created a sidebar menu with hashed links to have a scrolled navigation, wich as far as I've been is working. But when I'm clicking on the hashed anchors, all the elements are moving a little further top, including header and footer and are hidden by the overflow:hidden; property of the .main-wrap element. In addition when I go back to the non-hashed page, the issue is still running unless I reload it.

I can't find any clue of how I can fix it. Any ideas ?

Edited : I also use a reset.css that is setting the body and html padding and margin to 0.

Edited 2 : I think I know what's going on. By clicking on an anchor-link the body is forced to scroll the .main-wrap div and that's why everything looks like it has moved top. In fact the overflow:hidden; property of .main-wrap has just moved a little further down and is hiding the wrong parts.

Similar to this issue w/a fixed header & obscured anchors? One option: add a class to the anchors that has a `padding-top` value to push it down a bit. Alternatively, use a `:before` psuedo-element, or JS to change the element's offset. May not be directly applicable to your sidebar issue, but perhaps the right direction: http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors .... — mc01, Mar 01 '16 at 19:32

Arbel · Answer 1 · 2016-03-01T19:45:53.807

0

Default Browser Behavior:

When you click on a named or hashed link, the browser will try to scroll to have the target named link at the top of the view.

This is what is happening with your code too.

Another browser default:

Most browsers have default margins and padding greater than 0 for the HTML elements, including the html and body elements.

Your calculation of height: 84vh; /* Equal to 100vh - (header + footer)vh */ will cause the content height to be more than the viewport height if the html and the body tags have margins or paddings greater than 0 (and make it scrollable since you have body {overflow: scroll;}).

Solution:

Use a css reset, or in your case simply add this to your css

html,
body {
    margin:0;
    padding:0;
}

Demo https://jsfiddle.net/vkrhnf75/1/

edited Mar 01 '16 at 19:45

answered Mar 01 '16 at 19:33

Arbel

30,599
2
28
29

Ups, sorry i forgot to mention that I already use a reset.css with margins and paddings set at 0. It can't come from here. – Hadrien Lepoutre Mar 01 '16 at 19:48
If you remove the margin and padding from the demo you will get the scroll. So probably your posted code snippet is not complete or your css reset doesn't reset the margin and padding on html and body. – Arbel Mar 01 '16 at 19:50
Ok, I'm checking it just in case. Look at the 2nd edit I made, I think that's the root of my issue. What do you think ? – Hadrien Lepoutre Mar 01 '16 at 19:58
:) your second edit is basically what I'm explaining in my answer. – Arbel Mar 01 '16 at 20:03
I checked the CSS applied to my body and html and couldn't find any value that could be responsible of my issue. This is such a trick -_- – Hadrien Lepoutre Mar 01 '16 at 20:40
I found the answer ! It was a meany line-height taller than my footer height (the parent of this disturbing child). Thanks for your attention anyway ;) – Hadrien Lepoutre Mar 01 '16 at 21:14

How to Avoid Scroll on Hashed A Tag Click with Fixed Height Content

1 Answers1