# Solved: javascript/jquery scroll page question



## aconite (Feb 1, 2006)

hi,

I would very much like some help with this jquery page scroll, when I click on 'about' it scrolls to the relevant section but when i click on 'work' or 'contact', it doesn't seem to work and I have no idea why.

this is the javascript
$(function(){
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});

for the html, it is too long so you will need to go here and then view source

thanks


----------



## tomdkat (May 6, 2006)

There are some validation errors you should address first and see if those solve your issue.

I'm not really a JQuery expert but my gut tells me the issue is related to some of those validation errors. See if you can get those cleaned up and let us know if things start working.

Peace...


----------



## MMJ (Oct 15, 2006)

tomdkat said:


> There are some validation errors you should address first and see if those solve your issue.
> 
> I'm not really a JQuery expert but my gut tells me the issue is related to some of those validation errors. See if you can get those cleaned up and let us know if things start working.
> 
> Peace...


Yep, you have the same id for multiple elements (ids should be unique).


----------



## tomdkat (May 6, 2006)

MMJ said:


> Yep, you have the same id for multiple elements (ids should be unique).


Man, why are you giving it away????  LOL

Yeah, that's what I noticed as well. That's also pointed out in the validation errors at the W3 validator site.

See if cleaning those up solves your problem. 

Peace...


----------



## aconite (Feb 1, 2006)

cleaned up the ids but it still doesn't work


----------



## tomdkat (May 6, 2006)

Actually, it IS working. 

Please take a closer look at your HTML, namely this:

```
<ul id="nav"> 
        		<li [b][color=red]id="about"[/color][/b]><a href="[b][color=red]#about[/color][/b]">About</a></li> 
                <li id="work"><a href="#work">Work</a></li> 
                <li id="contact"><a href="#contact">Contact</a></li> 
        	</ul>
```
Given how those list elements are coded, when you click the links the browser will scroll to *those elements*.

Next, let's look at this:

```
<div class="mainContent"> 
        
        	<div class="division"></div> 
            
            <h2 [b][color=red]id="me"[/color][/b]>About</h2> 
                       
            <div class="innerContent">
```
Since you have changed the ids of the actual sections of the site , you will need to update your navigation menu to reference the NEW ids.

So, your navigation menu should be coded like this:

```
<ul id="nav"> 
        		<li id="about"><a href="[b][color=red]#me[/color][/b]">About</a></li> 
                <li id="work"><a href="[b][color=red]#job[/color][/b]">Work</a></li> 
                <li id="contact"><a href="[b][color=red]#touch[/color][/b]">Contact</a></li> 
        	</ul>
```
Once you get that working, you might want to change the ids of the page sections to be more description. 

Here are WORKING links that demonstrate your navigation menu is currently incorrectly coded:

http://www.pngwebdesign.co.uk/#me
http://www.pngwebdesign.co.uk/#job
http://www.pngwebdesign.co.uk/#touch

Look at how the browser scrolls when clicking those links.

On a side note, you should also remove the 
* element with id "top" and either put it above the DIV with id "wrapper" or code a new, empty DIV with id "top" so that when the arrows are clicked to return to the top of the page, your company logo gets displayed:



Code:


<body> 
[b][color=red]<a name="top"></a>[/color][/b]
<div id="wrapper"> 
 
	<h1 id="logo"><a href="index.html">Png Web Design</a></h1> 
    <h3>Freelance Web Designer</h3> 
            <div id="main-img">

Let us know how it goes. 

Peace...*


----------



## MMJ (Oct 15, 2006)

tomdkat said:


> Man, why are you giving it away????  LOL
> 
> Yeah, that's what I noticed as well. That's also pointed out in the validation errors at the W3 validator site.
> 
> ...


Hah, thought you were in a rush or something cause you're usually rather thorough, didn't realize you were going down the self-help road with a nudge in the correct direction.


----------



## tomdkat (May 6, 2006)

MMJ said:


> Hah, thought you were in a rush or something cause you're usually rather thorough, didn't realize you were going down the self-help road with a nudge in the correct direction.


It's all good man, just giving you a hard time. 

You know I have absolutely NO problem with what you posted. 

Peace...


----------



## aconite (Feb 1, 2006)

tom,

will let you know the outcome once i have gone through your explanation
thanks again


----------



## aconite (Feb 1, 2006)

tom,

thanks once again for your help


----------



## tomdkat (May 6, 2006)

No problem. The site you linked to above still shows the incorrect locations in the anchors in the nav menu. Have you tested the updated nav menu links on a different page or on a local page or something?

Are things working as you want now? If so, great! 

Peace...


----------

