Question

I have a main div with scroll and outer-dives and inner-dives. I would like when I click a button the main div scrolls to the beginning of the next inner-div the situation is better explained in this jsfidlle

http://jsfiddle.net/alamin84/63FY7/2/

The first click scroll to div 11 then 12 then 13 then to 21 which is in the next sub-div and so on

I tried to make use of the second comment of this question

Get the first and last visible element in a scrollable div by Rob W
but the variable $first which should hold reference to first visible element gives me undefined when console.logged.
The question is what is it am doing wrong? How to do this right?

Thanks in advance

****Edit****

After applying devundef’s suggestion I still can’t get the right sequence of scrolling

which is now 12 -22 -32

And should be 11 – 12 -13 -21-22…etc

In another word how to get the first visible inner div (class=”sub2”) which I can then use to get/scrollto the next visible inner div

The new fiddle

http://jsfiddle.net/alamin84/63FY7/15/

Answer 1

how to get the first visible inner div (class=”sub2”)?
I did not need to have an outer selector for the outer div and inner selector for the inner div
Only one selector for the inner div would do

Code:

                 $("#btnScroll").click(function (event) {

                     var $firstinner, $lastinner, $containerinner = $("#dvmn"),
                         positions = $containerinner.offset(),
                         positionsinner = $containerinner.offset();


                     $('.sub2').each(function (i, obj) {
                         var $thisinner = $(this),
                             positioninner = $thisinner.offset();


                         if (!$firstinner && positioninner.top >= positions.top) {

                             $firstinner = $thisinner.next();
                             if ($firstinner.length == 0) {
                //When last inner div get to next outer div
                                 $firstinner = $thisinner.parent().next();

                             }

                             console.log($firstinner);
                         }

                     });

                     $containerinner.scrollTo($($firstinner), {
                         duration: 500
                     });

                 });

Fiddle:
http://jsfiddle.net/alamin84/63FY7/24/

And of course using jquery.scrollTo plugin thanks to devundef