Fixed header: change default starting position of body text for #anchor tag

HTML & CSS
1

Hi all, as the subject says, I am linking body anchor text on the same page to an index that has a fixed header. My body text is wrapped inside a div.

.body{
padding: 10px;
margin-top: 89px;
margin-bottom: 60px;
margin-right: 190px;
margin-left: 190px;
text-align: justify;
width: auto;
}

When I link and try to focus on the anchor text the page moves to the same place below the intended keywords every time. This is what I have tried.

<a name=“#sometext” style=“position: relative; margin-top: -89px;”>sometext</a>
<a name=“#sometext” style=“position: relative; margin-top: 89px;”>sometext</a>
<a name=“#sometext” style=“position: relative; padding-top: -89px;”>sometext</a>
<a name=“#sometext” style=“position: relative; padding-top: 89px;”>sometext</a>

So far, there is no change in focus, the page moves to the same point below the intended text . Can someone point out what I am doing wrong?

Dave

2

I’m not totally clear on what the situation is here. Are you saying that when you click a link to those anchors, the browser lands down below those links? It would be great to see this in action.

The best way these days to link to a point on the page is with an ID. E.g. here is the link to click:


<a [COLOR="#FF0000"]href="#something"[/COLOR]>Go to the Something section</a>

and here is the text the browser would jump to:


<h2 [COLOR="#FF0000"]id="something"[/COLOR]>The Something Section</h2>
3

Hi,

If the issue is that that when you follow a fragment identifier the text slides under the fixed header then that is a downside of using fixed elements I’m afraid.

You could use the :target pseudo class (ie9+) to add some padding to the top of the targetted element to move it under the fixed header.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { padding:100px 0 0; }
h1 {
	height:100px;
	border:1px solid #000;
	position:fixed;
	z-index:99;
	background:red;
	margin:0;
	line-height:100px;
	top:0;
	right:0;
	left:0;
}
h2 { margin:0 0; }
h2:target{padding-top:100px}
</style>
</head>

<body>
<h1>Header</h1>
<h2 id="section1">Section 1 starts here</h2>
<p><a href="#section2">Go to section 2</a></p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<h2 id="section2">Section 2 starts here</h2>
<p><a href="#section3">go to section 3</a></p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<h2 id="section3">Section 3 starts here</h2>
<p><a href="#section4">go to section 4</a></p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<h2 id="section4">Section 4 starts here</h2>
<p>test <a href="#section1">go to section 1</a></p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</body>
</html>

Of course should the page content not be tall enough under the target element then you will get a gap above the targeted element as it only scrolls to the top of the page when there is not enough room on the page to see all of it.

For older browsers there is no other choice but to use js and scroll the content into view or add a dummy id/element that is set xxpx above where you want the page to scroll to.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { padding:0}
h1 {
	height:100px;
	border:1px solid #000;
	position:fixed;
	z-index:99;
	background:red;
	margin:0;
	line-height:100px;
	top:0;
	right:0;
	left:0;
}
h2 { margin:0 0; }
p{height:25px;margin:0}
</style>
</head>

<body>
<h1>Header</h1>
<p id="section1">&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>Section 1 starts here</h2>
<p><a href="#section2">Go to section 2</a></p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p id="section2">test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<h2>Section 2 starts here</h2>
<p><a href="#section3">go to section 3</a></p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p id="section3">test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<h2>Section 3 starts here</h2>
<p><a href="#section4">go to section 4</a></p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p id="section4">test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<h2>Section 4 starts here</h2>
<p>test <a href="#section1">go to section 1</a></p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</body>
</html>

Of course that is rather convoluted and not always easy to implement in a varied page.

4

Hi Paul, I believe I have found some jquery snippets called >> jQuery.ScrollTo and jQuery.LocalScroll << to compensate for the fixed header, but I am having trouble applying them, if I am off base on the script can you refer me to the correct js.

5

Hi,

JS is not my thing but I’ve added some jquery to my original demo which seems to do what you want.

http://www.pmob.co.uk/temp/scroll-to-fixed-header.htm

Hope that helps (view source all the code is in the head).

6

Thanks Paul, should have thought before I typed.

7

Found a fixed header and on-page anchor text css solution!

Hi all, I have come across a nice, css solution without resorting to jquery… enjoy

8

I already gave you that solution in post #3. :slight_smile:

…or add a dummy id/element that is set xxpx above where you want the page to scroll to.

9

Thanks for pointing that out Paul, too scattered, not enough time… :wink: