Anchor Tags with fixed header

In this example below you will see how to do a Anchor Tags with fixed header with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 01fade, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 01fade ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Anchor Tags with fixed header</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!--Solution by http://pixelflips.com/blog/anchor-links-with-a-fixed-header-->
<header> 
	<nav>
		<div id="logo"></div>
			<ul>
				<li><a href="#one">One</a></li>
				<li><a href="#two">Two</a></li>
				<li><a href="#three">Three</a></li>
				<li><a href="#four">Four</a></li>
			</ul>
	</nav>
</header> <!-- fixed header -->
<div id="main">
	<!--link to this hidden span with -->	
	<span id="one" class="anchor"></span>
	<!--this is the actual content of where the hidden span is linked to-->
	<div id="actualone">One</div>
	
	<span id="two" class="anchor">Two</span>
	<div id="actualtwo">Two</div>
	
	<span id="three" class="anchor">Three</span>
	<div id="actualthree">Three</div>
	
	<span id="four" class="anchor">Four</span>
	<div id="actualfour">Four</div>
	
	<footer>Copyright by me</footer>
</div> <!-- absolute main -->
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/01fade/anchor-tags-with-fixed-header-NqZWzK */
/* Solution by http://pixelflips.com/blog/anchor-links-with-a-fixed-header */
body {
	margin: 0;
}

.anchor {
	display: block;
  height: 100px; /*same height as header*/
  margin-top: -100px; /*same height as header*/
  visibility: hidden;
}

header {
	background-color: crimson;
	height: 100px;
	line-height: 100px;
	width: 100vw;
	top: 0;
	position: fixed;
	z-index: 100;
}

#logo {
	background-color: black;
	margin: 10px;
	width: 80px;
	height: 80px;
	float: left;
}

header ul {
	list-style: none;
	float: right;
	margin: 0 10px;
}

header ul li {
	display: inline-block;
}

#main {
	position: absolute;
	width: 100vw;
	top: 100px; /*same height as header*/
}

#main div {
	position: relative;
	height: 300px;
	padding: 20px;
}

#actualone, #actualthree {background: #999}

#actualtwo, #actualfour {background: #555}

footer {
	background: #000;
	line-height: 50px;
	height: 50px;
}

/* make it prettier */

body, a {
	font-family: sans-serif;
	color: white;
	text-decoration: none;
}

/*Downloaded from https://www.codeseek.co/01fade/anchor-tags-with-fixed-header-NqZWzK */
$(window).scroll(function(){
	console.log($(window).scrollTop());
})

var one = $("#one");
var two = $("#two");
var three = $("#three");
var four = $("#four");

// https://www.youtube.com/watch?v=FpwIhAjZ44Y
function smoothScroll(divNum) {
		event.preventDefault(); //no flashing
		$("html, body").animate({
				scrollTop: divNum.offset().top
		}, 1200);
		return false;
};

$("ul li:nth-child(1) a").click(function () {
		smoothScroll(one);
});
$("ul li:nth-child(2) a").click(function () {
		smoothScroll(two);
});
$("ul li:nth-child(3) a").click(function () {
		smoothScroll(three);
});
$("ul li:nth-child(4) a").click(function () {
		smoothScroll(four);
});

Comments