Ok, it is one line of code, but I continuously forget it.
You place an anchor on your web site, but you do not like the immediate jump. You would prefer a motion that bring you to the anchor and let you understand that you are moving.
Well the code is extremely easy and you need just to import a jQuery library.
/*******
*** Anchor Slider by Cedric Dugas ***
*** Http://www.position-absolute.com ***
Never have an anchor jumping your content, slide it.
Don't forget to put an id to your anchor !
You can use and modify this script for any project you want, but please leave this comment as credit.
File: jquery.anchor.js
*****/
$(document).ready(function() {
$("a.anchorLink").anchorAnimate()
});
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1100
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
window.location.hash = elementClick
});
return false;
})
})
}
And here is the HTML:
<!doctype html>
<head>
[...]
</head>
<body>
[...]
</header>
[...]
<div>
<div>
<h2>Menu</h2>
<ul>
<li><a href="#anchor_master" class="anchorLink">Master degree</a></li>
<li><a href="#anchor_bachelor" class="anchorLink">Bachelor degree</a></li>
<li><a href="#anchor_projects" class="anchorLink">University projects</a></li>
<li><a href="#anchor_highschool" class="anchorLink">High School</a></li>
</ul>
</div>
[...]
<div id="master_degree">
<span id="anchor_master"></span>
[...]
</div>
<div id="bachelor_degree">
<span id="anchor_bachelor"></span>
[...]
</div>
<div id="projects">
<span id="anchor_projects"></span>
[...]
</div>
<div id="highschool">
<span id="anchor_highschool"></span>
[...]
</div>
</div>
</div>
[...]
<script>window.jQuery || document.write("<script src='scripts/jquery-1.8.2.min.js'>\x3C/script>")</script>
<script type="text/javascript" src="scripts/jquery.anchor.js"></script>
</body>
</html>
Notice: i
It is needed only the import of the JS file and that the link has the class="anchorLink"
For the rest is a normal HTML, you do not need any special id, class, etc...
Nessun commento:
Posta un commento