|
Fixed header with scroll to item on page, not working
Hello!
I have a one page portfolio site with a fixed header. It's simple I just want it so that when someone clicks a link in the header it eases nicely to that part of the page. Here is my code. I had someone take a look at it at jquery.com and they were helpful but it's still not working. Maybe someone here could give it a shot.
Here is my html code:
above the <style> tag in the <head> tag I have linked jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Here is my menu:
<li><a href="#sidebar-work" class="work">work<span></span></a></li>
<li><a href="#sidebar-about" class="about">about<span></span></a></li>
<li><a href="#sidebar-services" class="services">services<span></span></a></li>
<li><a href="#" class="blog">blog<span></span></a></li>
<li><a href="#sidebar-contact" class="contact">contact<span></span></a></li>
<li><a href="#" class="twitter">twitter<span></span></a></li>
I read somewhere that I should make my class link:
<a href="#sidebar-work" class="scrolltoanchor">Comments</a>
The problem is when I put that into my menu, the icon for my work link disappears (I'm using icons for my links, not just text).
Here is the javascript I have at the bottom of the page below the footer.
<!--javascript-->
<script type="text/javascript">
$(function() {
function scroll(direction) {
var scroll, i,
positions = [],
here = $(window).scrollTop(),
collection = $('.post');
collection.each(function() {
positions.push(parseInt($(this).offset()['top'],10));
});
for(i = 0; i < positions.length; i++) {
if (direction == 'next' && positions[i] > here) { scroll = collection.get(i); break; }
if (direction == 'prev' && i > 0 && positions[i] >= here) { scroll = collection.get(i-1); break; }
}
if (scroll) {
$.scrollTo(scroll, {
duration: 750
});
}
return false;
}
$("#next,#prev").click(function() {
return scroll($(this).attr('id'));
});
$("#menu a").click(function() {
$.scrollTo($($(this).attr("href")), {
duration: 750
});
return false;
});
});
</script>
ANY HELP is so appreciated!!
|