CODEWITHSUNDEEP
jqueryhtmlcssscrolljquery-scrollable
Mahendra
Mahendra

Reputation: 928

jQuery scroll top not working

My HTML content is being generated from jquery and its depends on ajax response. In HTML content I have #leftsection which has css "overflow-y:scroll;" Inside "#leftsection" I have boxes say "#devicebox_"+i which has css "overflow-y:hidden;"

I'm appending dynamic list to "#devicebox_"+i and if number of list content is > 6 I'm applying "#devicebox_"+i

my HTML content with left section and devicebox look something like this

<div id="leftsection">
   <div id="devicebox_1">
       <div id="listitem_1">LIST ITEM 1</div>
       <div id="listitem_2">LIST ITEM 2</div>
       <div id="listitem_3">LIST ITEM 3</div>
       <div id="listitem_4">LIST ITEM 4</div>
       <div id="listitem_5">LIST ITEM 5</div>
       <div id="listitem_6">LIST ITEM 6</div>
       <div id="listitem_7">LIST ITEM 7</div>
       <div id="listitem_8">LIST ITEM 8</div>
   </div>
</div>

Following is my jQuery to scroll down devicebox_1.

Remember there are multiple deviceboxes e.g devicebox_1,devicebox_2,devicebox_3 as a content is dynamic and so is listitem. after loading deviceboxes and their relative item list.

ajax request is being send one by one to process LIST ITEMS. what I'm trying to to is to scroll down current devicebox (devicebox_1) down to list item which is in process.

Following is small jQuery that I'm using to scroll down but not working

for( var i=0; i< $(itemlist).size(); i++)
{
   $('#devicebox_'+currDeviceid).animate({
          scrollTop: $('#listitem_'+i).offset().top
   }, 100);
}

Upvotes: 0

Views: 1290

Answers (1)

Johan
Johan

Reputation: 390

1: The scroll top is relative to your #devicebox_X element, so if you want to scroll your devicebox to the position of the listitem the devicebox element has to have the CSS style position: relative.

2: To use the offset relative to it's offset parent you need to use jQuery's position() method which works exactly the same as the offset method but then relative to it's parent.

See jQuery's description of the position method

Then it should work.

Upvotes: 1

Related Questions