Tengo el siguiente código que realiza la búsqueda de palabras en un sector de mi pagina, una vez encontrado la palabra pinta toda su etiqueta a
de color verde:
$(document).ready(function(){
$("#buscar_unidad").keyup(function(){
var texto=$("#buscar_unidad").val().toUpperCase();
if(texto.length!==0){
$("#nu0").children("li").each(function(i,e){
ul=$(e).children("ul");
ul.children("li").each(function(ii,ee){
var search=$(ee).children("a").html().toUpperCase();
var resultado=search.indexOf(texto);
if(texto.length>1 && resultado !== -1){
$(ee).children("a").css("color","#00ff00");
}else{
$(ee).children("a").css("color","");
}
});
});
}else{
$("#nu0").children("li").each(function(i,e){
ul=$(e).children("ul");
ul.children("li").each(function(ii,ee){
$(ee).children("a").css("color","");
});
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<label for="buscar">Buscar</label> <input id="buscar_unidad" type="text">
<ul id="nu0">
<li>
Distrito
<ul id="nu1">
<li>
<a class="name" href="http://localhost/public/planta/2">DIRECCION EJECUTIVA</a>
<ul id="nu2">
</ul>
</li>
<li>
<a class="name" href="http://localhost/public/planta/3">UNIDAD DE MANTENIMIENTO Y COORDINACION</a>
<ul id="nu3">
</ul>
</li>
<li>
<a class="name" href="http://localhost/public/planta/4">UNIDAD DE SEGUIMIENTO A PROYECTOS</a>
<ul id="nu4">
</ul>
</li>
<li>
<a class="name" href="http://localhost/public/planta/5">UNIDAD DE ESTUDIOS Y ELABORACION DE PROYECTOS</a>
<ul id="nu5">
</ul>
</li>
<li>
<a class="name" href="http://localhost/public/planta/8">UNIDAD ADMINISTRATIVA Y FINANCIERA</a>
<ul id="nu8">
</ul>
</li>
<li id="li1">
<a href="#" onclick="nu(this)" data-i="1" style="color: red">
<i class="fa fa-plus"></i>
</a>
</li>
</ul>
</li>
<li>
Maestranza
<ul id="nu6">
<li>
<a class="name" href="http://localhost/public/planta/7">UNIDAD DE MANTENIMIENTO DE EQUIPOS</a>
<ul id="nu7">
</ul>
</li>
<li id="li6">
<a href="#" onclick="nu(this)" data-i="6" style="color: red">
<i class="fa fa-plus"></i>
</a>
</li>
</ul>
</li>
<li>
RESIDENCIA ACASIO
<ul id="nu9">
<li>
<a class="name" href="http://localhost/public/planta/15">RESIDENCIA ACASIO</a>
<ul id="nu15">
</ul>
</li>
<li id="li9">
<a href="#" onclick="nu(this)" data-i="9" style="color: red">
<i class="fa fa-plus"></i>
</a>
</li>
</ul>
</li>
</ul>
Todo funciona bien, pero el caso es que quisiera saber:
como colocar un marcador de donde se encuentra la palabra en el scroll, como la siguiente imagen:
Y en lo posible solo pintar la parte que esta escrita en el buscador, esto en el scroll de mi sección de búsqueda.