problemas con funcion arriba abajo

[kaninox]

Buenas muchachos, les comento que tengo una pagina donde tengo una capa la cual cargo contenido mediante ajax. esta capa tiene un alto y ancho predeterminados y funciona ok, el problema es que ahora el contenido de esa pagina que cargo dentro de la capa es muy largo y se me ocurrio ponerle unos botoncitos para subir y bajar pero no me funciona :/

mi ajax es :

Código Javascript:

function nuevoAjax(){
    var xmlhttp=false;
     try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
    catch (e) {
         try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");    }
        catch (E) { xmlhttp = false; }
      }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp = new XMLHttpRequest(); }
    return xmlhttp;
}
function acciona() {
    var capa = document.getElementById('detallesbody');
    if (ajax.readyState==1) { capa.innerHTML = '<div align="center" style="width:100%;"><br /><br /><img src="imagenes/load.gif" border="0" alt="Cargando..." title="Cargando..."></div>'; }
    else if ((ajax.readyState == 4) && (ajax.status == 200)) { capa.innerHTML =ajax.responseText; }
}
function capallenar(destinox) {
    ajax = nuevoAjax();
    ajax.onreadystatechange = acciona;
    ajax.open("GET", destinox,true);
    ajax.send(null);
}
 

y lo llamo

Código HTML:

<a onclick="capallenar('detalles.php?id=<?php echo "$datos[id]";?>');" style="cursor:pointer;">Detalles Conferencista</a>
 
<div align="justify" id="detallesbody" style="width:500px;height:300px;">capa a llenar con detalles.php</div>
 

ahora en detalles.php quiero poner esto.

Código HTML:

<script language="JavaScript" type="text/javascript">
scrollList=new Array();
function registraScroll(idAbajo, idArriba, div, velAbajo, velArriba)
{
    if(scrollList[idAbajo]==null) scrollList[idAbajo]=new Array();
    if(scrollList[idArriba]==null) scrollList[idArriba]=new Array();
    scrollList[idAbajo].push(new Array(div, velAbajo));
    scrollList[idArriba].push(new Array(div, velArriba));
}
window.onload=inicializar;
function getEl(elementId)
{
    return document.getElementById(elementId);
}
function inicializar()
{
    for(key in scrollList)
    {
        var elemento=getEl(key);
        elemento.onmouseover=iniciaScroll;
        elemento.onmouseout=detieneScroll;
    }
}
function iniciaScroll()
{
    scrollDivs=new Array();
    velDivs=new Array();
    for(key in scrollList[this.id])
    {
        scrollDivs.push(getEl(scrollList[this.id][key][0]));
        velDivs.push(scrollList[this.id][key][1]);
    }
    identificadorx=setInterval('scrollNow()', 25);
}
function detieneScroll()
{
    clearInterval(identificadorx);
}
function scrollNow()
{
    for(key in scrollDivs)
    {
    var desplazamientoActual=scrollDivs[key].scrollTop;
    var nuevoDesplazamiento=desplazamientoActual+velDivs[key];
    scrollDivs[key].scrollTop=nuevoDesplazamiento;
    }
}
</SCRIPT>
<script type="text/javascript">
registraScroll(
'flechaAbajo',
'flechaArriba',
'listaexpositor',
1,
-1
);
</script>
<style type="text/css">
.scroll
{
    width:150px; height:50px; overflow:hidden; border:2px solid #000000;
}
.flecha
{
    cursor:pointer;
}
</style>
<div id="listaexpositor" class="scroll">
    Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>
    Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>
    Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>
    Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>Mucho contenido<br>
</div>
<div id="flechas">
    <span id="flechaArriba" class="flecha">Arriba</span>
    <br>
    <span id="flechaAbajo" class="flecha">Abajo</span>
</div>
 

si lo ejecuto por separado funciona, pero dentro del ajax no me carga el javascript.
alguna idea?

Saludos