根据页面上哪个突出显示的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