Hey, I'm trying to get jquery to scroll the page to certain anchors.

 

Does anyone know of a plugin, or can write code that would work in this context. Keep in mind that the header is static, and its only the content div that scrolls, sort of acting like an iframe I guess.

 

http://qwibbledesigns.co.uk/preview/wood/

 

Any ideas? =)

<script type="text/javascript">
$(document).ready(function() {
$('.scrollPage').click(function() {
  var elementClicked = $(this).attr("href");
  var destination = $(elementClicked).offset().top;
  $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-20}, 500 );
  return false;
});
});
</script>

 

I tried this one, but am aware that I need to target the div#content area rather than the body. However, when I substitute html for div#content, the first scroll works, and thereafter it scrolls to seemingly random places on the page. Does anayone know how to make it target just the div#content?

Okay, so it does actually work, but you need to reclick the link to resend it back to the top of the page, before you can click a new link which is far from useable.

Just out of curiosity, why did you choose to make the div scrollable, as opposed to just fixing the position of the header?

 

Fixing the position of the header would prevent double scrollbars on smaller resolutions, plus it creates the same effect even when js is disabled?

 

Anyway,

 

Have a look at this http://jqueryfordesi...-slider-effect/

 

You're effectively doing the same, except vertically as opposed to horizontally.

 

Their are tons of plugins about to do this kind of thing, such as scrollTo/LocalScroll. You can see an example of it implemented here

 

http://themeforest.n...n_preview/34008