Skip to content

Instantly share code, notes, and snippets.

@csakiistvan

csakiistvan/index.html

Created September 12, 2013 11:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save csakiistvan/6536178 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save csakiistvan/6536178 to your computer and use it in GitHub Desktop.
Download ZIP
One pager navigation, scroll to div id
Raw
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Drupal Developer Days, Szeged 2014</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="shortcut icon" href="favicon.png" type="image/png" />
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,400italic,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<nav id="navigation">
<ul>
<li><a class="nav-link" title="Programme" href="#programme">Programme</a></li>
<li><a class="nav-link" title="Testimonials" href="#testimonials">Testimonials</a></li>
<li><a class="nav-link" title="Sponsorship" href="#sponsorship">Sponsorship</a></li>
<li><a class="nav-link" title="Location" href="#location">Location</a></li>
<li><a class="nav-link" title="Venue" href="#venue">Venue</a></li>
<li><a class="nav-link" title="Disclaimer" href="#disclaimer">Disclaimer</a></li>
</ul>
</nav>
<section class="programme" id="programme">
<header>
<h2 class="title">
programme
</h2>
</header>
</section>
<section class="testimonials" id="testimonials">
<header>
<h2 class="title">
testimonials
</h2>
</header>
</section>
<section class="sponsorship" id="sponsorship">
<header>
<h2 class="title">
sponsorship
</h2>
</header>
</section>
<section class="location" id="location">
<header>
<h2 class="title">
location
</h2>
</header>
</section>
<section class="venue" id="venue">
<header>
<h2 class="title">
venue
</h2>
</header>
</section>
<section class="disclaimer" id="disclaimer">
<header>
<h2 class="title">
disclaimer
</h2>
</header>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/navigation.js"></script>
</body>
</html>
Raw
navigation.js
;(function ($, window, document, undefined) {
'use strict';
({
animateScroll : function () {
$("#navigation").find('.nav-link').on('click', function (event) {
var $this = $(this),
$htmlBody = $('html, body'),
linkTarget = $this.attr('href'),
offSetTop;
// If not start with #, stop here!
if (linkTarget[0] !== '#') {
return false;
}
event.preventDefault();
// Get distance of top
offSetTop = $(linkTarget).offset().top;
// Animate the scroll
$htmlBody.stop().animate({scrollTop : offSetTop}, function () {
location.hash = linkTarget;
});
});
},
init : function () {
var that = this;
$(function () {
that.animateScroll();
});
}
}).init();
}(jQuery, window, document));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment