Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 11-25-2011, 01:26 PM   PM User | #1
11va17bene
New to the CF scene

 
Join Date: Dec 2010
Posts: 7
Thanks: 1
Thanked 0 Times in 0 Posts
11va17bene is an unknown quantity at this point
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!!
11va17bene is offline   Reply With Quote
Reply

Bookmarks

Tags
easing, jquery, scroll to

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 12:15 AM.


Advertisement
Log in to turn off these ads.