Question

我找到了jQuery的anchor plugin，其演示网站位于http://www.position-relative.net/creation/anchor/。

我正在网站上开发一个FAQ页面，其中的问题列表后面跟着一个答案列表。当用户点击问题时，我可以使用滚动效果向下移动到相应的答案。但我也希望在某些方面或其他方面突出显示答案，以便用户可以专注于答案。

我想达到这个效果。此外，如果你知道其他任何插件，请告诉我。

Answer 1

我个人使用jquery.scrollTo来强调它非常简单，只需在包含答案的span / div上使用.toggleclass（）。

Answer 2

使用以下方法调用锚插件时

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

你也可以绑定你自己的突出显示功能：

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

这要求你有这种结构：

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

...

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

在CSS中，您只需定义突出显示部分的外观：

.highlight {
    background: #ffc;
}

jQuery代码的工作方式是，当您单击锚点链接时，它首先删除当前的高亮显示，然后在链接目标后立即将高亮类应用于该元素。

您可以通过在SO中执行某种颜色渐变动画来扩展此功能，但这应该可以让您开始。

使用jQuery突出显示目标的滚动效果

2 个答案: