滾動到並突出顯示類別爲「.agree」的錨點結果加載後

Question

我需要滾動到顯示在問號結尾處的錨點.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

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