Scrollen Sie automatisch nach unten auf dem markierten div auf einer Seite

Question

Ich habe Seite, wo ich bestimmte Audiodateien, die mit dem Text verwandt sind, und wenn verwandte Audiodatei wiedergegeben wird dann verwandten Text sollte Highlight sein. Problem, mit dem ich konfrontiert bin, ist, dass ich das markierte div für den Grund sichtbar halten muss. Ich bin nicht sicher, wie ich automatisch die Seite nach unten scrollen kann, um das markierte div sichtbar zu halten, damit er es lesen kann.

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> 

Ich versuchte folgenden Code, aber diese Arbeit nicht

$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

Fügen Sie folgende nach var x = $(".playing").position();:

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

Here is your updated code