Scroll to a certain location using a Dojo ContentPanel

My Dojo application uses a few co开发者_StackOverflow中文版ntentpanes to display different bits of information. The main pane has a good amount of scrollable data. I need to be able push a button to jump to certain places.

Currently using:

dojo.byId(iid).scrollIntoView();

This works perfectly except that it seems to base the calculation on the browser window top rather than the contentpanes' top. Since my contentpane is NOT on the top of the page (There's a 50px high toolbar on top) the DIV that I'm scrolling too is 50px too high.

Something like this would work but scrollBy only applies to the window:

dojo.byId(iid).scrollIntoView();   //Scroll to div in quesiton
dojo.byId(iid).scrollBy(0,50);   //scroll down 50px more to account for panes offset from window.

Background of complete app: The app uses a few dijit.layout.BorderContainer's for layout. A user can click on the left tree to bring up an event in the right panel. If they click on a "Target", I create all the DOM nodes in the right panel dynamically then attempt to scroll to the clicked on item. The scrolling part works for the top and bottom nodes but is offset for the middle nodes.

---

Not sure if this is legit, but I just took the dojox.fx.scroll code and added the 'offset' functionality mentioned above (I needed it, too).

I started by snatching the dojox.fx.scroll code using Chrome debugger, and pasting it into a new .js file in my scripts folder.

I changed the name in the 'define' string from dojox/fx/scroll to dojox/fx/scrollMod. I also changed references from .smoothScroll to .smoothScrollMod.

define("dojox/fx/scrollMod", ["dojo/_base/kernel", "dojo/_base/lang", "dojo/_base/fx",
"dojox/fx/_base", "dojox/fx/_core", "dojo/dom-geometry", "dojo/_base/sniff"],
function (_1, _2, _3, _4, _5, _6, _7) {
_1.experimental("dojox.fx.scroll");
var fx = _2.getObject("dojox.fx", true);
_4.smoothScrollMod = function (_8) {
    if (!_8.target) {
        _8.target = _6.position(_8.node);
    }

    var dx = 0; //RW Custom Offsets
    var dy = 0; //RW Custom Offsets
    if (_8.offset) {
        dx = _8.offset.x;
        dy = _8.offset.y;
    }

    var _9 = _2[(_7("ie") ? "isObject" : "isFunction")](_8["win"].scrollTo),
    _a = { x: _8.target.x + dx, y: _8.target.y + dy };

    if (!_9) {
        var _b = _6.position(_8.win); _a.x -= _b.x; _a.y -= _b.y;
    }
    var _c = (_9) ? (function (_d) { _8.win.scrollTo(_d[0], _d[1]); }) : (function (_e) { _8.win.scrollLeft = _e[0]; _8.win.scrollTop = _e[1]; });
    var _f = new _3.Animation(_2.mixin({ beforeBegin: function () {
        if (this.curve) { delete this.curve; }

        var _10 = _9 ? dojo._docScroll() : { x: _8.win.scrollLeft, y: _8.win.scrollTop };
        _f.curve = new _5([_10.x, _10.y], [_10.x + _a.x, _10.y + _a.y]);
    }, onAnimate: _c
    }, _8));
    return _f;
};
fx.smoothScrollMod = _4.smoothScrollMod; return _4.smoothScrollMod;
});

I added the following to the _4.smoothScrollMod method:

var dx = 0; //RW Custom Offsets
var dy = 0; //RW Custom Offsets
if (_8.offset) {
    dx = _8.offset.x;
    dy = _8.offset.y;
}

Then you reference this file in your HTML file like a normal script:

<script src="scripts/dojoScrollMod.js" type="text/javascript"></script>

And finally call it like so (like you normally would, but with the offset object):

  var sm = new dojox.fx.smoothScrollMod({
      node: dojo.query("mySelector")[0],
      win: window,
      easing: dojo.fx.easing.quadInOut,
      offset: { "x": 0, "y": -200},
      duration: 800
  }).play();

---

One option might be to take advantage of dojox.fx.smoothScroll.

Example: http://jsfiddle.net/kfranqueiro/6aNrp/

The API doc on smoothScroll is admittedly minimal but it does explain a few of the parameters you can pass in the object to it. http://dojotoolkit.org/api/dojox/fx/smoothScroll - incidentally, the API site uses a variant of dojox.fx.smoothScroll to do the same thing.