Question

I’m trying to use scrollTo plugin to scroll several divs in my document.

The problem is the items I’m scrolling to don’t always exist, so it throws an error.

Each of the scrollable divs contain a list of anchors. Depending on the user input, some items change their class (and it’s multiple classes for each item). I have 4 optional classes each item can change to:

 <a id="445" class="list col3"">Paris</a>
 <a id="445" class="highlighted col3">Paris</a>
 <a id="445" class="selected col3">Paris</a>
 <a id="445" class="noshow col3">Paris</a>

I want to scroll each div to the selected/highlighted item, if there is one. If there isn’t such item, nothing should happen.

I use this syntax to do the scrolling:

$("div#places4").scrollTo($('a.highlighted.col4'),800);

It works fine when there is a highlighted element in div#places4, but when there isn’t, it throws an error (“o is undefined” – referring to the scrollTo code).

I tried conditioning the call to scrollTo like this:

if($('a.highlighted.col4').length<!0) {$("div#places4").scrollTo($('a.highlighted.col4'),800)}

But the same error shows up.

Other then the annoyance of the error (I like my console clean and empty when my page loads!), the error prevents future calls to scrollTo, because when I call several scrolls one after the other, none of them executes:

if($('a.selected.col1').length<!0) {$("div#places1").scrollTo($('a.selected.col1'),8000)}
if($('a.selected.col2').length<!0) {$("div#places2").scrollTo($('a.selected.col2'),8000)}
if($('a.selected.col3').length<!0) {$("div#places3").scrollTo($('a.selected.col3'),8000)}
if($('a.selected.col4').length<!0) {$("div#places4").scrollTo($('a.selected.col4'),8000)}

Any help would be highly appreciated!

Answer 1

Your approach for checking the existence of the element is correct, by your condition is wrong, try this:

if ($('a.highlighted.col4').length) { 
    $("div#places4").scrollTo($('a.highlighted.col4'),800)
}