根據頁面上哪個突出顯示的div自動向下滾動

Question

我有頁面，我必須播放某些與文本相關的音頻文件，以及何時播放相關的音頻文件，那麼相關文本應該是高亮顯示的。我面臨的問題是，我需要保持突出顯示的div可見的原因。我不知道如何自動向下滾動頁面以保持突出顯示的div可見，以便他可以閱讀它。

JSBin Example

HTML

<audio id="myAudio"> 
    <source src="" type="audio/mpeg"> 
</audio> 
<button>Play Audio</button> 
<div class="wrapper"> 
    <span>Rooster</span> 
    <span>Cat</span> 
    <span>Horse</span> 
    <span>Elephant</span> 
    <span>Vulture</span> 
    <span>Duck</span> 
    <span>Rooster</span> 
    <span>Cat</span> 
    <span>Horse</span> 
    <span>Elephant</span> 
    <span>Vulture</span> 
    <span>Duck</span> 
    <span>Rooster</span> 
    <span>Cat</span> 
    <span>Horse</span> 
    <span>Elephant</span> 
    <span>Vulture</span> 
    <span>Duck</span> 
    <span>Rooster</span> 
    <span>Cat</span> 
    <span>Horse</span> 
    <span>Elephant</span> 
    <span>Vulture</span> 
    <span>Duck</span> 
</div> 

我嘗試下面的代碼，但這不工作

$aud.onplay = function() { 
    $btn.text("Pause Audio"); 
    playing = true; 
    $("div > span:nth-child(" + (audioIndex + 1) + ")").addClass("playing"); 
    var wHeight = $(window).height(); 
    var wHalfHeight = wHeight; 
    var x = $(".playing").position(); 
    var curentSpanPosition = x.top(); 
    wHalfHeight = wHalfHeight/2; 

    //if (curentSpanPosition > wHalfHeight) 
    //{ 
    $(".playing").animate({ 
     scrollTop: curentSpanPosition 
    }); 
    //} 
    }; 

Answer 1

添加以下後var x = $(".playing").position();：

$('html, body').animate({ 
     scrollTop: x.top 
}, 400); 

Here is your updated code