0

我需要滚动到.agree问卷末尾显示的锚点。第一个问题决定了最后显示的内容，这就是为什么在文档末尾有#if_one #if_two和#if_three.. 所以解决方案必须适用于所有 3 个可能的答案。我试图让它滚动到最后的 div （而不是跳转），并突出显示 div 使边框变为红色。

这是我试图滚动到并突出显示的锚的部分：

<div id="if_one">
    <a href="http://websitelinkhere.com/1" class="button_primary agree">If Question 1 = Answer 1</a>
</div>
<div id="if_two">
    <a href="http://websitelinkhere.com/2" class="button_primary agree">If Question 1 = Answer 2</a>
</div>
<div id="if_three">
    <a href="http://websitelinkhere.com/3" class="button_primary agree">If Question 1 = Answer 3</a>
</div>

这是JSFiddle

4

1 回答 1

1

动画页面是简单的部分，你只需要这样做：

$('html, body').animate({
    scrollTop: target.offset().top
}, 200);

这将为 的html和body的顶部边缘设置动画target。在这种情况下不需要使用插件或扩展。

然而，复杂的部分是确定您想要滚动到的三个可用答案中的哪一个。如果没有更多您的代码，我不确定我们能否在这方面为您提供更多帮助。

如果您想滚动到的答案是＃2，请进一步扩展我上面的示例：

// assign the correct target
var target = $('#if_two');

// scroll!
$('html, body').animate({
    scrollTop: target.offset().top
}, 200);

200您可以通过更改上述示例来加快或减慢效果。

您还可以在动画回调中更改目标元素的样式，因此总的来说它看起来像：

// assign the correct target
var target = $('#if_two');

// scroll!
$('html, body').animate({
    scrollTop: target.offset().top
}, 200, function(){
    target.css({'border-color': 'red'})
});
于 2013-10-16T14:33:31.290 回答