I would like to implement a jquery smooth scrolling thing. So when I click on my navigation it should send me to the section of that page with a smooth animation.
This is the code I am talking about:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
This is my html code:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src="jquery/smooth_scroll.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="navigatie">
<ul class="navigatie">
<li><a href="#specialties">We Are Flot</a></li>
<li><a href="#specialties">Our Specialties</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#team">Team</a></li>
</ul>
</div>
<header>
<img class="logo" src="images/logo.png" alt="Loading.." />
<img class="headerBg" src="images/header.png" alt="Loading.." />
</header>
<section class="main">
<article id="specialties" class="specialties">
<h1 class="blue">Our specialties</h1>
<p class="description">We have a person for every specialty</p>
<article class="subjecs sub1">
<img class="diamond" src="images/diamond.png" alt="Loading.." />
<h2 class="blue">Ideas</h2>
<p class="black">Wij zetten uw visie, presentatie of idee om in overtuigende media producten en ondersteunen de vorming
daarvan door met uw mee te denken, en vooral vooruit!</p>
</article>
<article class="subjecs">
<img class="wand" src="images/wand.png" alt="Loading.." />
<h2 class="blue">UX/UI</h2>
<p class="black">Wij zorgen ervoor door onze grote kennis van User Experience en User Interface dat de site niet
alleen goed werk, maar er ook nog eens goed uitziet voor de gebruiker.</p>
</article>
<article class="subjecs">
<img class="tags" src="images/tags.png" alt="Loading.." />
<h2 class="blue">Code</h2>
<p class="black">Wij zorgen ervoor dat de code netjes en verzorgd word geschreven. De code zal met comments geschreven worden dat andere codeurs het kunnen lezen.</p>
</article>
<div class="clear"></div>
</article>
</section>
<section class="secondPart">
<article id="projects" class="projects">
<h1 class="white">Projects</h1>
<p class="white description">These are the projects that Flot have been working on</p>
<article class="projectItems project1">
<a href="#"><img class="testDing" src="images/extase.jpg" alt="Loading.." /></a>
<h2 class="white">Extase Tilburg</h2>
<p class="white">Extase Tilburg is een cafe/pub voor de echte muziek-liefhebber, waar iedere dag live-muziek te horen
is in talloze muziek genres.</p>
<a href="#"><img class="button" src="images/button.png" alt="Loading.." /></a>
<div class="spacer"></div>
<div class="clear"></div>
</article>
<article class="projectItems">
<div class="tint"><a href="#"><img class="testDing" src="images/obs.jpg" alt="Loading.." /></a></div>
<h2 class="white">OBS Den Bussel</h2>
<p class="white">De vorige site was te "grauw" voor een basisschool. Ons nieuwe design moet wat meer vreugde uitstralen maar toch de blauwe sfeer van de school blijven.</p>
<a href="#"><img class="button" src="images/button.png" alt="Loading.." /></a>
<div class="spacer"></div>
<div class="clear"></div>
</article>
<article class="projectItems">
<a href="http://ift.tt/1LMJtWp"><img class="testDing" src="images/lutastables.jpg" alt="Loading.." /></a>
<h2 class="white">Luta Stables</h2>
<p class="white">Luta Stables is een kleinschalige dressuurstal die zich richt op de training en in- en verkoop van paarden en pony's. Het was aan ons om een complete huisstijl voor luta stables te verzinnen.</p>
<a href="http://ift.tt/1LMJtWp"><img class="button" src="images/button.png" alt="Loading.." /></a>
<div class="spacer"></div>
<div class="clear"></div>
</article>
<!-- <hr class="lijn">-->
<article class="projectItems project1">
<div class="spacer"></div>
<a href="#"><img class="testDing" src="images/tachos.jpg" alt="Loading.." /></a>
<h2 class="white">HV Tachos</h2>
<p class="white">HV Tachos is een handbalvereniging waar iedereen van jong tot oud welkom is. HV Tachos vroeg om een vernieuwende look en dat heeft flot gerealiseerd d.m.v. een one-page website.</p>
<a href="#"><img class="button2" src="images/button.png" alt="Loading.." /></a>
<div class="clear"></div>
</article>
<article class="projectItems">
<div class="spacer"></div>
<a href="http://ift.tt/1KklHnl"><img class="testDing" src="images/NailAngel.jpg" alt="Loading.." /></a>
<h2 class="white">NailAngel</h2>
<p class="white">NailAngel is een nagelstudio waarbij iedereen welkom is. Ze had een website die aan vernieuwing toe was en wil een website die zorgt voor een volle agenda! Hier gaan wij voor zorgen.</p>
<a href="http://ift.tt/1KklHnl"><img class="button2" src="images/button.png" alt="Loading.." /></a>
<div class="clear"></div>
</article>
<div class="clear"></div>
</article>
</section>
<section class="thirdPart">
<article id="team" class="team">
<h1 class="blue">Team</h1>
<p class="description">Flot is a five persons team</p>
<article class="people">
<a href="#"><img src="images/team/rick.png" alt="Loaing.." /></a>
</article>
<img class="blueBall" src="images/team/blueBall.png" alt="Loaing.." />
<article class="people">
<a href="http://ift.tt/1LMJrxJ"><img class="secondRow" src="images/team/sander.png" alt="Loaing.." /></a>
</article>
<img class="blueBall" src="images/team/blueBall.png" alt="Loaing.." />
<article class="people">
<a href="http://ift.tt/1KklHnn"><img src="images/team/kevin.png" alt="Loaing.." /></a>
</article>
<img class="blueBall" src="images/team/blueBall.png" alt="Loaing.." />
<article class="people">
<a href="#"><img class="secondRow" src="images/team/monique.png" alt="Loaing.." /></a>
</article>
<img class="blueBall" src="images/team/blueBall.png" alt="Loaing.." />
<article class="people">
<a href="#"><img src="images/team/jasper.png" alt="Loaing.." /></a>
</article>
<div class="clear"></div>
</article>
</section>
<footer>
<!--
<div class="copy">
<img class="footerLogo" src="images/logoFooter.png" alt="Loading.." />
</div>
-->
<article class="footer">
<article class="rij">
<h3>Recent werk</h3>
<a href="#" target="_blank"><p class="pFooter">Extase Tilburg</p></a>
<a href="#" target="_blank"><p class="pFooter">OBS Den Bussel</p></a>
<a href="http://ift.tt/1LMJtWp" target="_blank"><p class="pFooter">Luta Stables</p></a>
<a href="#"><p class="pFooter" target="_blank">HV Tachos</p></a>
<a href="http://ift.tt/1LMJrxM" target="_blank"><p class="pFooter">NailAngel</p></a>
</article>
<article class="rij">
<h3>Flot</h3>
<a href="http://ift.tt/1LMJrxJ" target="_blank"><p class="pFooter">Sander Mateijsen</p></a>
<a href="#" target="_blank"><p class="pFooter">Jasper Peters</p></a>
<a href="http://ift.tt/1KklHnn" target="_blank"><p class="pFooter">Kevin Vugts</p></a>
<a href="#" target="_blank"><p class="pFooter">Rick van Boxtel</p></a>
<a href="#" target="_blank"><p class="pFooter">Monique van der Harst</p></a>
</article>
<article class="rij">
<h3>Diensten</h3>
<p class="pFooter">Code</p>
<p class="pFooter">UX / UI</p>
<p class="pFooter">Webdesign</p>
<p class="pFooter">CMS Systemen</p>
<p class="pFooter">Reclame</p>
</article>
<article class="rij">
<h3>Links</h3>
<a href="#" target="_blank"><p class="pFooter">Facebook</p></a>
<a href="#" target="_blank"><p class="pFooter">Linkedin</p></a>
<a href="#" target="_blank"><p class="pFooter">Twitter</p></a>
<a href="#" target="_blank"><p class="pFooter">Flickr</p></a>
<a href="#" target="_blank"><p class="pFooter">Behance</p></a>
</article>
<article class="footerLogo">
<img class="footerLogo" src="images/logoFooter.png" alt="Loading.." />
</article>
<p class="copyright">Copyright 2015 | Flot Grafisch Design Bureau. Alle rechten voorbehouden.</p>
</article>
</footer>
</div>
</body>
</html>
It should send me to the section specialities when clicked on the <li> specialities. and the same for all other <li> items in my navigation in the top.
Unfortunately I am getting the error:$ is not defined. Can you help me out with this?
Aucun commentaire:
Enregistrer un commentaire