I'm using a static bar at the top of my site, about 20px high. When I click an anchor link(for those who don't know, the navigation on wikipedia works like that. Click a title and the browser goes down to it) part of the text disappears behind that top bar.
Is there any way to stop this from happening? I'm not in a position where I can use an iFrame. Onlything I can think of is make it scroll back a bit each time, but is there another way? Some CSS setting to manipulate the body or something?
You could just use CSS without any javascript.
Give your anchor a class:
<a class="anchor"></a>
You can then position the anchor an offset higher or lower than where it actually appears on the page, by making it a block element and relatively positioning it. -250px will position the anchor up 250px
a.anchor{display: block; position: relative; top: -250px; visibility: hidden;}
By Jan see offsetting an html anchor to adjust for fixed header
scroll-margin-top: 20px;
It does exactly what it sounds like: acts as if there is a margin, but only when in the context of scrolling. So scroll-margin-top: 20px; on an element means that clicking an anchor tag for that element will scroll the page to 20px above the element.
No support for IE. Also, Safari versions 11-14 use a non-standard name: scroll-snap-margin-top (but otherwise works as expected). Safari 14.1+ works with the standard name.
nav{
position: fixed;
top:0;
left:0;
background: black;
color: white;
width: 100%;
}
#after-nav{
margin-top: 25px;
}
#section-1{
width: 100%;
background: green;
height: 500px;
scroll-margin-top: 20px;
}
#section-2{
width: 100%;
background: blue;
height: 500px;
scroll-margin-top: 20px;
}
ul{
margin-top: 0;
}<nav>
Nav bar: 20px (as in OP)
</nav>
<div id="after-nav">
Table of contents:
<ul>
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
</ul>
<div id="section-1">Section 1</div>
<div id="section-2">Section 2</div>
</div>
To fix this with CSS you can add a padding to the Elements you want to jump to:
Alternatively, you could add a border:
div{
height: 650px;
background:#ccc;
/*the magic happens here*/
border-top:42px solid #fff;
}
ul{
top: 0;
width: 100%;
height:20px;
position: fixed;
background: deeppink;
margin:0;
padding:10px;
}
li{
float:left;
list-style:none;
padding-left:10px;
}
div:first-of-type{
margin-top:0;
}<!-- content to be placed inside <body>…</body> -->
<ul>
<li><a href="#s1">link 1</a>
<li><a href="#s2">link 2</a>
<li><a href="#s3">link 3</a>
<li><a href="#s4">link 4</a>
</ul>
<div id="s1" class="first">1</div>
<div id="s2">2</div>
<div id="s3">3</div>
<div id="s4">4</div>However, this is not always applicable.
For a javascript solution you could use a click event attached to the anchor elements that scrolls an adjusted amount of pixels like following:
document.querySelector("a").addEventListener("click",function(e){
// dynamically determining the height of your navbar
let navbar = document.querySelector("nav");
let navbarheight = parseInt(window.getComputedStyle(navbar).height,10);
// show 5 pixels of previous section just for illustration purposes
let scrollHeight = document.querySelector(e.target.hash).offsetTop - navbarheight - 5;
/* scrolling to the element taking the height of the static bar into account*/
window.scroll(0,scrollHeight);
/*properly updating the window location*/
window.location.hash = e.target.hash;
/* do not execute default action*/
e.preventDefault();
});nav{
position:fixed;
top:0;
left:0;
right:0;
height:40px;
text-align:center;
background:#bada55;
margin:0;
}
a{
display:block;
padding-top:40px;
}
#section1{
height:800px;
background:repeating-linear-gradient(45deg,#606dbc55,#606dbc55 10px,#46529855 10px,#46529855 20px);
}
#section2{
height:800px;
background:repeating-linear-gradient(-45deg,#22222255,#22222255 10px,#66666655 10px,#66666655 20px);
}<nav>static header</nav>
<a href="#section2">jump to section 2</a>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
CSS-only: it's a little dirty, but :target {padding-top: 20px;} would work if you are linking to a block element (I assumed you do, since your question says div). However, it might not look so good when you scroll manually afterwards. Example http://dabblet.com/gist/3121729
Still, I think that using a bit of JavaScript to fix this would be nicer.
I had the same problem. Here's a jQuery solution
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $trget = $(target);
// Example: your header is 70px tall.
var newTop = $trget.offset().top - 70;
$('html, body').animate ({
scrollTop: newTop
}, 500, 'swing', function () {
window.location.hash = target;
});
});
Try with window.scrollBy(xnum,ynum);
xnum: How many pixels to scroll by, along the x-axis (horizontal) ynum: How many pixels to scroll by, along the y-axis (vertical)
For example: http://www.w3schools.com/js/tryit.asp?filename=try_dom_window_scrollby
After searching through all of the other answers above, the one that worked for me to fix my scrolling anchor issue was the following:
Code:
#idname {
scroll-margin-top: 20px;
}
Thank you to those above who suggested this answer. You can obviously change the pixel number for the margin. I changed it from 20px to 40px and it works like a charm.
