Scroll to next visible element

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/

Marcelo De Zen · Answer 1 · 2012-08-05T12:23:31.283

1

This line never evaluates to true:

if ($first && position.top >= positions.top) ...

Because $first is null at this point. You have to ask for !$first

if (!$first && position.top >= positions.top) ...

fiddle: http://jsfiddle.net/63FY7/3/

BTW, I would suggest jquery.scrollTo plugin, it works very well:

demo: http://demos.flesler.com/jquery/scrollTo/

snippet: http://jsfiddle.net/wuN65/1/

edited Aug 05 '12 at 12:23

answered Aug 05 '12 at 12:05

Marcelo De Zen

9,439
3
37
50

1

A very nice jQuery plugin handling scrollto and more: [jQuery Waypoints](http://imakewebthings.com/jquery-waypoints/) – Tgr Aug 05 '12 at 12:32
1

You're inside a loop and you want the first element that satisfies the condition `position.top >= positions.top`. $first starts with no value, once you hit the first element that has `position.top >= positions.top` you set it to `$first`. First now holds the first element. Test `!$first` means: if I don't have found the $first yet... – Marcelo De Zen Aug 09 '12 at 09:28

score 0 · Accepted Answer · answered Aug 14 '12 at 00:29

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

score -1 · Answer 3 · answered Aug 05 '12 at 20:12

-1

A very crude and old-school method would be to use the scrollIntoView() method.

So if you know what the next element is, you can just do..

element.scrollIntoView()

Scroll to next visible element

3 Answers3