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

**tizak** · Sep 19, 2012 03:25

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

**ralph.m** · Sep 19, 2012 03:52

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:

Code:

<a href="#something">Go to the Something section</a>

and here is the text the browser would jump to:

Code:

<h2 id="something">The Something Section</h2>

**Paul O'B** · Sep 19, 2012 05:44

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.

Code:

<!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.

Code:

<!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.

**tizak** · Sep 19, 2012 16:34

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.

**Paul O'B** · Sep 20, 2012 02:01

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).

**tizak** · Sep 20, 2012 03:02

Thanks Paul, should have thought before I typed.

**tizak** · Sep 26, 2012 04:35

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

http://www.pixelflips.com/blog/ancho...-fixed-header/

**Paul O'B** · Sep 26, 2012 05:42

Originally Posted by tizak

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

http://www.pixelflips.com/blog/ancho...-fixed-header/

I already gave you that solution in post #3.

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

**tizak** · Sep 26, 2012 06:58

Thanks for pointing that out Paul, too scattered, not enough time...

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions