javascript - Anchor Onclick Division Highlight

Question

我制作了一个简单的网页，其中包含很多部分。所以为了直接导航到一个部门，我在上面放了一个 anchor :

<a href="#first">First</a><br/>
<a href="#second">Second</a><br/>
<a href="#third">Third</a>

为了平滑滚动，我使用了 javascript:

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});

现在我想给选中的分区添加效果。因此，当用户单击 anchor 时，页面会平滑地滚动到该部门，并且所选部门会突出显示一秒钟。就像当我们在 Stack Overflow 收件箱中收到任何新闻时，我们会点击它；页面加载并且新闻项目在短时间内突出显示。

我想对我的页面做那件事。因为我有超过 18 个分区，而且它们都是相同的。所以有必要区分所选的分区。

这是 fiddle 的例子:Fiddle For the Code

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

在您的代码中 $('html, body') 返回 2 个元素，因此动画将触发两次。如果你包含 jquery.ui 你将能够做到这一点:

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

JsFiddle