sticky nav + table anchor demo

by Mottie

HTML

<nav>
	<a href="#">Home</a>
	<a href="#">Forums</a>
	<a href="#">Projects</a>
	<a href="#">Contact</a>
</nav>
<br>
<br>
<table id="table">
	<thead>
		<tr>
			<th>ID</th>
			<th>Quantity</th>
			<th>Animals</th>
			<th>Sites</th>
		</tr>
	</thead>
	<tbody>
		<tr id="I">
			<td><a href="#I">abc 123</a></td>
			<td>10</td>
			<td>Koala</td>
			<td>http://www.google.com</td>
		</tr>
		<tr id="II">
			<td><a href="#II">abc 1</a></td>
			<td>234</td>
			<td>Ox</td>
			<td>http://www.yahoo.com</td>
		</tr>
		<tr id="III">
			<td><a href="#III">abc 9</a></td>
			<td>10</td>
			<td>Girafee</td>
			<td>http://www.facebook.com</td>
		</tr>
		<tr id="IV">
			<td><a href="#IV">zyx 24</a></td>
			<td>767</td>
			<td>Bison</td>
			<td>http://www.whitehouse.gov/</td>
		</tr>
		<tr id="V">
			<td><a href="#V">abc 11</a></td>
			<td>3</td>
			<td>Chimp</td>
			<td>http://www.ucla.edu/</td>
		</tr>
		<tr id="VI">
			<td><a href="#VI">abc 2</a></td>
			<td>56</td>
			<td>Elephant</td>
			<td>http://www.wikipedia.org/</td>
		</tr>
		<tr id="VII">
			<td><a href="#VII">abc 9</a></td>
			<td>155</td>
			<td>Lion</td>
			<td>http://www.nytimes.com/</td>
		</tr>
		<tr id="VIII">
			<td><a href="#VIII">ABC 10</a></td>
			<td>87</td>
			<td>Zebra</td>
			<td>http://www.google.com</td>
		</tr>
		<tr id="IX">
			<td><a href="#IX">zyx 1</a></td>
			<td>999</td>
			<td>Koala</td>
			<td>http://www.mit.edu/</td>
		</tr>
		<tr id="X">
			<td><a href="#X">zyx 12</a></td>
			<td>0</td>
			<td>Llama</td>
			<td>http://www.nasa.gov/</td>
		</tr>
	</tbody>
</table>
<br>
<a href="#table">Top of table</a>
<div class="spacer"></div>

CSS

nav {
	background: #0080ff;
	padding: 4px;
	width: 100%;
	position: fixed;
}
nav a {
	padding: 2px 5px;
}
table {
	padding-top: 25px;
}
table, th, td {
	border: #000 1px solid;
	padding: 4px;
}
th {
	background: #ddd;
}
.spacer {
	height: 1000px;
}

JavaScript

function moveUnderNav() {
	var $el, h = window.location.hash;
	if (h) {
		$el = $(h);
		if ($el.length && $el.closest('table').length) {
			$('body').scrollTop( $el.closest('table, tr').position().top - 26 );
		}
	}
}

$(window)
	.load(function () {
		moveUnderNav();
	})
	.on('hashchange', function () {
		moveUnderNav();
	});