autoscroll panel

[JeroenNL]

Hi,

I have a panel with a button on the top, some elements in the middle and an invisible table at the bottom. When I click the button, the table becomes visible. I want the panel to scroll down automatically to the table when I press the button. I have tried the jquery animate and scrollTo functions but can't get it to work within a JEasyUI panel...

How to achieve this effect?

Cheers,
JeroenNL

[jarry]

If you are using 'scrollTo' plugin, please try:

Code:

$('#panel').scrollTo('#table', 500);

You also can extend a 'scrollTo' method for the panel to achieve this functionality.

Code:

$.extend($.fn.panel.methods, {
	scrollTo: function(jq, param){
		return jq.each(function(){
			param.duration = param.duration || 0;
			var top1 = $(param.target).offset().top;
			var top2 = $(this).offset().top;
			var top = $(this).scrollTop()+(top1-top2);
			$(this).animate({scrollTop:top}, param.duration);
		})
	}
})

You can call 'scrollTo' method now.

Code:

$('#panel').panel('scrollTo', {
  target: '#table',
  duration: 400
});

[JeroenNL]

I'm using the scrollTo from https://github.com/flesler/jquery.scrollTo but can't get it to work. Are you sure it works with a JeasyUI panel?

[jarry]

Yes, it works fine. Please refer to http://jsfiddle.net/nsgcoeqo/

[JeroenNL]

I was hoping you'd supply a jsfiddle, and you did. Thanks!

I have been testing with a panel in my app too and it works with one panel, but not with another.

That other panel has a panel-noscroll css class applied to it. Seems that's the issue, but I don't know how to solve it yet. Any ideas?

Edit: solved it by wrapping things in another panel. Now it works just fine. Thanks!