Anchor Onclick Division Highlight

anchor, html, javascript, jquery

Solution

In Your code $('html, body') returns 2 elements so animation will fire twice. If you include jquery.ui You will be able to do this:

$('a').click(function(){
    var selector = $(this).attr('href');        
    $('html').animate({
        scrollTop: $(selector).offset().top
    }, 500,'',function(){
        $(selector).effect("highlight", {}, 1000);                             
    });
    return false;
});

JsFiddle

Problem

I have made a simple webpage with lots of division. So to navigate direct to a division I have put a anchor on top like this : ``` <a href="#first">First</a><br/> <a href="#second">Second</a><br/> <a href="#third">Third</a> ``` And for smooth scrolling I have used javascript: ``` $('a').click(function(){ $('html, body').animate({ scrollTop: $( $(this).attr('href') ).offset().top }, 500); return false; }); ``` Now I want to add effect to the selected division. So when user click on an anchor, the page smoothly scrolls to the division and the selected division is highlighted for a second. Just like when we get any news in Stack Overflow inbox, and we click on it; the page lodes and the news item is highlighted for a short duration. I want to do that thing to my page. Cause I'm having more then 18 divisions and they are all same.So it is necessary to differentiate the selected division. Here is the example Fiddle : Fiddle For the Code Any help would be appreciated. Thanks in advance.

Original source