Question

我创建了一个包含大量分区的简单网页。因此，为了直接导航到一个部门，我已将锚点放在这样的顶部：

<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;
});

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

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

以下是小提琴示例：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

Answer 2

这使用不透明度，例如：

$('a').click(function(){
    var el = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500, function(){
        $(el).animate({'opacity':0.5},200, function(){ $(el).animate({'opacity':1}, 200)} );
    });
    return false;
});

Anchor Onclick Division亮点

2 个答案: