denzildoyle/Section Scroll.html

## Section Scroll.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Section Scroll</title>
	<link rel="stylesheet" href="">
</head>

<style type="text/css">
	@import url(http://fonts.googleapis.com/css?family=Lato);

	*{
		margin:0;
	    padding:0;
	    font-family: 'Lato', sans-serif;
	    list-style: none;
	    text-decoration: none;
	}

	.container{
		width: 80%;
		margin: 50px auto;
	}
	.container p{
		margin-top: 30px;
		line-height: 26px;
	}

	header{
		overflow: auto;
	}

	header a{
		float: right;
	}

	ul li a{
		margin-left: 5px;
	}
</style>

<body>
	<header class="container">
		<a href="#about-author">about me</a>
	</header>

	<div class="container">

		<h1>Story</h1>

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis lacus consectetur, ornare eros ac, bibendum magna. Duis venenatis malesuada urna in mattis. Nullam dapibus malesuada erat, ut tempus lectus consectetur dictum. Vivamus consectetur ornare eros vitae faucibus. Sed volutpat, sapien ac congue accumsan, nisi enim consequat velit, id semper sapien sem quis felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu lorem accumsan, congue lectus pretium, sagittis turpis. Cras scelerisque justo id dictum iaculis. Aenean eget sem placerat, aliquet tellus id, condimentum lectus. Ut ornare erat et turpis vehicula, pretium tincidunt libero condimentum. Mauris tellus dolor, consequat ut urna at, elementum euismod sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc luctus mattis nunc vitae interdum. Proin et ligula feugiat, dictum turpis sed, eleifend dui. Maecenas tincidunt pulvinar justo nec semper. Phasellus et ipsum tempus, luctus augue in, condimentum arcu.</p>

		<p>Vivamus id enim leo. Sed dapibus diam vel nunc lacinia, sed interdum velit egestas. Suspendisse eleifend ornare posuere. Nullam sollicitudin eget dolor ac ullamcorper. Donec ullamcorper ante quam, ac fermentum lectus varius quis. Mauris molestie dui id tempus dignissim. Aliquam dapibus sollicitudin ligula, at tincidunt eros volutpat in.</p>

		<p>Aenean vehicula mi magna, non auctor dolor iaculis sit amet. Nulla facilisi. Aenean eu nisl ligula. Integer vitae pharetra elit. Nunc lorem lorem, cursus at ullamcorper id, tempor a felis. Sed enim mauris, sagittis vitae porta quis, mollis scelerisque ante. Donec commodo dictum nulla ac pretium. Integer malesuada, neque non vulputate ornare, diam odio tempor ante, ac tempor libero augue eu nunc. Nunc suscipit est non massa tempor bibendum. Mauris dictum enim a magna auctor fermentum. Nam id lobortis orci, a malesuada augue. Donec vel ullamcorper felis. Sed at elit leo. Praesent tortor ante, adipiscing et justo non, porta commodo tortor.</p>

		<p>Pellentesque risus risus, consequat eu vulputate sed, vestibulum at purus. Mauris massa ligula, sodales quis mi eget, viverra lobortis urna. Proin ut fermentum orci. Integer et turpis in lacus posuere imperdiet. Proin eget diam hendrerit augue venenatis ultricies. Nulla elit arcu, aliquet in viverra vitae, ultricies vitae neque. Quisque porta facilisis leo, eleifend volutpat tellus mattis in. Nullam ac ante aliquet, elementum turpis id, tincidunt augue. Donec tincidunt lacus mattis arcu auctor, at placerat nisi mollis. Sed posuere felis est, a euismod lacus semper eu. Integer luctus ipsum id pharetra feugiat. Quisque nec porta est. Fusce vitae porttitor sem, at ornare dui. Morbi pharetra dolor lorem, id accumsan justo malesuada vel. Pellentesque velit massa, mattis ut scelerisque eu, imperdiet et nisl.</p>

		<p>Sed laoreet venenatis massa, quis pellentesque mi faucibus ut. Donec vitae mauris est. Suspendisse quis elit neque. Sed sollicitudin, lectus eget bibendum rutrum, urna nunc euismod nunc, sed fringilla ipsum elit non dui. Cras imperdiet, magna sed consectetur consequat, arcu elit posuere dolor, id feugiat risus nulla vel nisi. Nam commodo libero et neque blandit, in sodales tellus tincidunt. Fusce pretium nulla quis hendrerit ultrices.</p>
	</div>

	<footer>
		<div id="about-author" class="container">
			<h3>Denzil Doyle</h3>
			<ul>
				<li>Twitter: <a href="www.twitter.com/denzildoyle">@denzildoyle</a></li>
				<li>Website: <a href="www.denzildoyle.me">www.denzildoyle.me</a></li>
				<li>Email: <a href="mailto:doyle.d@apsolute-tt.com">Email</a></li>
			</ul>
			<p>Passionate problem solver. Entrepreneur, web and mobile designer/developer. Reader. Podcast addict. Passionate PHP advocate. Social networks guru. Mad Scientist. Footballer. Occasional comedian, or maybe not.</p>
		</div>
	</footer>

	<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
	<script type="text/javascript">
        $(document).ready(function(){
            $('a[href^="#"]').on('click',function (e) {
                e.preventDefault();

                var target = this.hash,
                $target = $(target);

                $('html, body').stop().animate({
                    'scrollTop': $target.offset().top
                }, 1000, 'swing');
            });
        });
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Section Scroll</title>
	<link rel="stylesheet" href="">
	</head>

	<style type="text/css">
	@import url(http://fonts.googleapis.com/css?family=Lato);

	*{
	margin:0;
	padding:0;
	font-family: 'Lato', sans-serif;
	list-style: none;
	text-decoration: none;
	}

	.container{
	width: 80%;
	margin: 50px auto;
	}
	.container p{
	margin-top: 30px;
	line-height: 26px;
	}

	header{
	overflow: auto;
	}

	header a{
	float: right;
	}

	ul li a{
	margin-left: 5px;
	}
	</style>

	<body>
	<header class="container">
	<a href="#about-author">about me</a>
	</header>

	<div class="container">

	<h1>Story</h1>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis lacus consectetur, ornare eros ac, bibendum magna. Duis venenatis malesuada urna in mattis. Nullam dapibus malesuada erat, ut tempus lectus consectetur dictum. Vivamus consectetur ornare eros vitae faucibus. Sed volutpat, sapien ac congue accumsan, nisi enim consequat velit, id semper sapien sem quis felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu lorem accumsan, congue lectus pretium, sagittis turpis. Cras scelerisque justo id dictum iaculis. Aenean eget sem placerat, aliquet tellus id, condimentum lectus. Ut ornare erat et turpis vehicula, pretium tincidunt libero condimentum. Mauris tellus dolor, consequat ut urna at, elementum euismod sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc luctus mattis nunc vitae interdum. Proin et ligula feugiat, dictum turpis sed, eleifend dui. Maecenas tincidunt pulvinar justo nec semper. Phasellus et ipsum tempus, luctus augue in, condimentum arcu.</p>

	<p>Vivamus id enim leo. Sed dapibus diam vel nunc lacinia, sed interdum velit egestas. Suspendisse eleifend ornare posuere. Nullam sollicitudin eget dolor ac ullamcorper. Donec ullamcorper ante quam, ac fermentum lectus varius quis. Mauris molestie dui id tempus dignissim. Aliquam dapibus sollicitudin ligula, at tincidunt eros volutpat in.</p>

	<p>Aenean vehicula mi magna, non auctor dolor iaculis sit amet. Nulla facilisi. Aenean eu nisl ligula. Integer vitae pharetra elit. Nunc lorem lorem, cursus at ullamcorper id, tempor a felis. Sed enim mauris, sagittis vitae porta quis, mollis scelerisque ante. Donec commodo dictum nulla ac pretium. Integer malesuada, neque non vulputate ornare, diam odio tempor ante, ac tempor libero augue eu nunc. Nunc suscipit est non massa tempor bibendum. Mauris dictum enim a magna auctor fermentum. Nam id lobortis orci, a malesuada augue. Donec vel ullamcorper felis. Sed at elit leo. Praesent tortor ante, adipiscing et justo non, porta commodo tortor.</p>

	<p>Pellentesque risus risus, consequat eu vulputate sed, vestibulum at purus. Mauris massa ligula, sodales quis mi eget, viverra lobortis urna. Proin ut fermentum orci. Integer et turpis in lacus posuere imperdiet. Proin eget diam hendrerit augue venenatis ultricies. Nulla elit arcu, aliquet in viverra vitae, ultricies vitae neque. Quisque porta facilisis leo, eleifend volutpat tellus mattis in. Nullam ac ante aliquet, elementum turpis id, tincidunt augue. Donec tincidunt lacus mattis arcu auctor, at placerat nisi mollis. Sed posuere felis est, a euismod lacus semper eu. Integer luctus ipsum id pharetra feugiat. Quisque nec porta est. Fusce vitae porttitor sem, at ornare dui. Morbi pharetra dolor lorem, id accumsan justo malesuada vel. Pellentesque velit massa, mattis ut scelerisque eu, imperdiet et nisl.</p>

	<p>Sed laoreet venenatis massa, quis pellentesque mi faucibus ut. Donec vitae mauris est. Suspendisse quis elit neque. Sed sollicitudin, lectus eget bibendum rutrum, urna nunc euismod nunc, sed fringilla ipsum elit non dui. Cras imperdiet, magna sed consectetur consequat, arcu elit posuere dolor, id feugiat risus nulla vel nisi. Nam commodo libero et neque blandit, in sodales tellus tincidunt. Fusce pretium nulla quis hendrerit ultrices.</p>
	</div>

	<footer>
	<div id="about-author" class="container">
	<h3>Denzil Doyle</h3>
	<ul>
	<li>Twitter: <a href="www.twitter.com/denzildoyle">@denzildoyle</a></li>
	<li>Website: <a href="www.denzildoyle.me">www.denzildoyle.me</a></li>
	<li>Email: <a href="mailto:doyle.d@apsolute-tt.com">Email</a></li>
	</ul>
	<p>Passionate problem solver. Entrepreneur, web and mobile designer/developer. Reader. Podcast addict. Passionate PHP advocate. Social networks guru. Mad Scientist. Footballer. Occasional comedian, or maybe not.</p>
	</div>
	</footer>

	<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
	$('a[href^="#"]').on('click',function (e) {
	e.preventDefault();

	var target = this.hash,
	$target = $(target);

	$('html, body').stop().animate({
	'scrollTop': $target.offset().top
	}, 1000, 'swing');
	});
	});
	</script>
	</body>
	</html>