jQuery-One-Page-Nav | Smooth scrolling and smart navigation | Navigation library

Here's my solution to the problem. It would be preferable to carry this out with CSS, but the constraint of not changing around the HTML made that impossible (as far as I can tell).

A few things to note: You're using a JQuery plugin which you've just copied and pasted here. As it turns out, this was rather fortuitous because I had to fix a problem with the plug-in itself. I needed the begin callback to be passing the element being clicked on, but it wasn't doing this, so I added it in. This means though that this solution wont work with the OnePageNav plug-in as it stands. I personally don't think it matters if you just import it into your own code because it isn't very big, and also it doesn't seem to be maintained anymore, so there probably wont be any more releases of it anyway.

I've also edited your code quite a bit in order to remove things which weren't relevant to the problem in hand to make it easier for me to understand. I also want to the solution to be as general as possible so that other people might be able to benefit from this too. I've kept the 'spirit' of your code though so I don't think you should have any problems should you want to adopt this solution.