Scrolling effect with the destination highlighted with jQuery

Question

I found an anchor plugin for jQuery, and its demo site is at http://www.position-relative.net/creation/anchor/.

I am developing a FAQ page on a website where a list of questions are followed by a list of answers. I could use the scroll effect to move down to the corresponding answer when a user click a question. But I also want the answer is highlighted in some ways or others so that a user can get focused on the answer.

I would like to achieve the effect. Also, if you know any other plugin to do this, please let me know.

Answer 1

I'd use jquery.scrollTo personally, to highlight it is pretty simple, just use .toggleclass() on the span/div that wraps the answer.

Answer 2

As you invoke the anchor plugin using:

$(document).ready(function() {
    $("a.anchorLink").anchorAnimate()
});

you could also bind your own function that does the highlighting as so:

$(document).ready(function() {
    $("a.anchorLink").anchorAnimate().click(function() {
        $('.highlight').removeClass('highlight');
        $('a[name='+$(this).attr('href').substring(1)+']').next().addClass('highlight');
    });
});

This requires that you have this kind of structure:

<a href="#foobar" class="anchorLink">Anchor link</a>

...

<a name="foobar"></a>
<div>The content you want to highlight</div>

And in CSS, you just define how you want the highlighted part to look like:

.highlight {
    background: #ffc;
}

The jQuery code works so that when you click an anchor link, it first removes current highlights and then applies the highlight class to the element immediately after the link target.

You could expand this functionality by doing some kind of color fade animation like here in SO, but this should get you started.