Question

I have a page with two scroll bars. I am using the scrollTo jquery plugin to jump to other areas on the same page. The problem is I only want the inner div to scrollTo and the outer div to remain at the top of the screen.

Development site link click here

This is the script

$(".jump > li").click(function() {
    var qu = $(this).attr("id");
    var an = "#" + qu.replace("q","a");

    // step 8
    $.scrollTo(an, {duration: 800, axis:"y"});
});

Any ideas?

Answer 1

Instead of $.scrollTo(); you want to call $(outerDivSelector).scrollTo() here, and you also need a return false to prevent the normal browser jumping to that location from the link’s href property, like this:

$(".jump > li").click(function() {
  var qu = $(this).attr("id");
  var an = "#" + qu.replace("q","a");
  $(".scroller").scrollTo(an, {duration: 800, axis:"y"});
  return false; //prevent the default link behavior
});