quiero hacer el efecto scroll automatico en javascrip pero no sé en que me esta fallando.
En si el boton se posiciona en un mapa diseñado en openlayer y quiero que al presionar el boton me lleve al fondo de la pagina o al div proximos-horarios. Presioné el boton y llama a la función como corresponde ya que le inserte un alert para berificar que ésto realmente fuera así.
Este es mi codigo html y la parte de javascript en donde creo y ejecuto el botón.
var botonscroll = document.createElement('botonscroll');
botonscroll.innerHTML="<img src='img/horarios_bus.png'/>";
var elementoDivboton = document.createElement('divscroll');
elementoDivboton.className = 'boton-scroll';
// elementoDivboton.onclick =scroll() ;
elementoDivboton.appendChild(botonscroll);
var NuevoControlBotonScroll = new ol.control.Control({ element:elementoDivboton });
map.addControl(NuevoControlBotonScroll);
//elementoDivImagen.style.display = 'none';
$('.boton-scroll').bind("click", function () {
alert ('ingreso');
// var dest = $("proximos_horarios").offset().top;
// $("html, body").animate({scrollTop: dest},600);
$('a[href*="#horarios"]').on('click', function (e) {
e.preventDefault()
$('html, body').animate(
{
scrollTop: $($(this).attr('href')).offset().top,
},
500,
'linear'
)
})
$(window).scroll(function() {
if ($(this).scrollTop() > 300) {
$('a.scroll-top').fadeIn('slow');
} else {
$('a.scroll-top').fadeOut('slow');
}
});
$('a.scroll-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 600);
});
});
.boton-scroll {
border-radius: 22px;
top: 90%;
right: 27px;
position: absolute;
box-shadow: 0px 3px 16px 7px rgba(0, 0, 0, 0.58);
cursor: pointer
}
<div data-role="main" id="headerlineas" style="height:100%;width:100%; position:absolute; background:#FFF; " >
<div align="center" id="map" class="map" style="height:80%;width:100%; background:#DADADA;">
<div style="width:99%;">
<select id="cuadras" style="width:100%; background:#DADADA;"></select>
</div>
<?php echo mapalinea($_GET[a]);?>
<div id="snackbar">No se encontraron Resultados para esta consulta, Por favor intente de nuevo</div>
</div>
<div id="proximos_horarios" style="visibility: block; width: 100%;">
<a id="titulo_horario_proximo_origen" href="#"
style="background-color: #86CE18; color: #FFF; width: 100%; font-size: 12px; scroll-behavior: smooth;"></a><br>
<a id="horario_proximo_origen" href="#"
style="color: #82867d; font-size: larger; font-family: unset;"></a> <br>
<br> <a id="titulo_horario_proximo_destino_transbordo" href="#horarios"
style="visibility: hidden; background-color: #01BFFF; color: #FFF; width: 100%; font-size: 12px; scroll-behavior: smooth;"></a><br>
<a id="horario_proximo_destino_transbordo" href="#"
style="visibility: hidden; color: #82867d; font-size: larger; font-family: unset;"></a>
<br>
<br>
</div>
</body ">
smooth