dynatree - How to scroll to active node?

Question

I have dynatree with fixed height and vertical scrollbar.

node.activate(); selects the node i'm searching for, but doesnt move the vertical scrollbar, so i have to scroll manualy to see active node.

How do i scroll it programmaticlly?

---

Thanks to mar10, I solved this problem:

var activeLi = node.li;
$('#tree').animate({
    scrollTop: $(activeLi).offset().top - $('#tree').offset().top + $('#tree').scrollTop()
}, 'slow');

Answer 1

Dynatree does not have a built-in scrollTo functionality. But you should be able to use one of the existing methods and plugins, once you have the DOM element that you want to make visible.

In your case, you already seem to have a node object, so you can get the the associated <li> and <span> tag using node.li or node.span.

In general you can get the active node at any time by calling

var node = $("#tree").dynatree("getActiveNode");
// or
var node = $("#tree").dynatree("getTree").getActiveNode();

then get the associated DOM element:

var activeLI = node && node.li;

or handle the activation event:

onActivate: function(node) {
    var activeLI = node.li;
    ...
}

Once you have the element, use a standard method:

Scroll to a div using jquery , jQuery scroll to element , How to scroll to an element in jQuery? , ...

Edit 2014-05 Starting with Fancytree 2.0 autoScroll was added as a standard option.

Answer 2

I had a similar problem, and have not been able to get the scrollTop to work as stated in the example above. I fixed it by changing the selector from '#tree' to '.dynatree-container':

$('.dynatree-container').animate({ // animate the scrolling to the node
  scrollTop: $(activeLi).offset().top - $('.dynatree-container').offset().top + $('.dynatree-container').scrollTop()
}, 'slow');

This should get you going and save a few hours of frustrataion (:

By the way, I am using dynatree version 1.22 and jquery 1.8.3 and jquery ui 1.9.2.