|
Title: autoscroll panel Post by: JeroenNL on September 25, 2015, 03:42:18 AM 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 Title: Re: autoscroll panel Post by: jarry on September 25, 2015, 05:20:49 PM 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, { You can call 'scrollTo' method now.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); }) } }) Code: $('#panel').panel('scrollTo', { target: '#table', duration: 400 }); Title: Re: autoscroll panel Post by: JeroenNL on September 26, 2015, 04:03:26 AM 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?
Title: Re: autoscroll panel Post by: jarry on September 26, 2015, 04:28:35 AM Yes, it works fine. Please refer to http://jsfiddle.net/nsgcoeqo/
Title: Re: autoscroll panel Post by: JeroenNL on September 26, 2015, 04:51:35 AM 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! :) |