CODEWITHSUNDEEP
jqueryanimation
Alex F
Alex F

Reputation: 183

Stop page scroll when using slideUp/slideDown Jquery

Here is the simplified extraction from html I have:

<div id="data-table"> ... some data ... </div>

<ul class="pagination">
  <li><a href="javascript:void(0)" onclick="ReDrawTable('2')">2</a></li>
  <li><a href="javascript:void(0)" onclick="ReDrawTable('3')">3</a></li>
  <li><a href="javascript:void(0)" onclick="ReDrawTable('3')">3</a></li>
</ul>

function ReDrawTable(pageId) { 
  jQuery('#data-table').slideUp('slow');
  RequestData(pageId);     
}

jQuery effect "slideUp" sometimes scrolls the page. Is there any chance to make it stop?

As the solution I found that I need to return false; but still can't figure out the proper solution.

Thank you in advance.

Upvotes: 0

Views: 1258

Answers (2)

Naji Amer
Naji Amer

Reputation: 61

This will maintain the scrollbar position while the element is sliding Up.


    var v = 0;  
    var bd = jQuery('body').get(0);
    jQuery('#test').slideUp({easing: "linear", step: function(now, tween) {
                        if(tween.prop == "height"){
                            if(v == 0){
                                v = now;
                            }else{
                                var k = v - now;
                                bd.scrollTop -= k;
                                v = now;
                            }
                        }
                    }, duration: 400, complete: function() { 

                    }
                });

Upvotes: 2

Raghu Chandra
Raghu Chandra

Reputation: 1132

Give Some width and height to your data-table div so it wont go out of browser window and scroll.

eg: 

#data-table{
    width:200px;
    height:150px;
    overflow:scroll;    
}

you can refer to this fiddle i just created. http://jsfiddle.net/n7us1Lxz/

Upvotes: 0

Related Questions