0

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 ">

1
  • Si no te molesta que no funciona en IE y Safari puedes utilizar scroll-behavior: smooth. Que no funciona significa que el scroll no será smooth
    – enxaneta
    el 6 jun. 2019 a las 19:44

1 respuesta 1

1

yo utilizo esta funcion

$('a[href*="#"]').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);
});

y luego simplemente en el enlace pongo el href al div

<li><a href="#horarios">Horario</a></li>

3
  • Lo probe amigo y no me lo está tomando. Se me queda plantado donde estaba nomas.
    – Sama
    el 6 jun. 2019 a las 17:33
  • ahi edite el codigo, estará bien asi? puse el href en el id="titulo_horario_proximo_destino_transbordo"
    – Sama
    el 6 jun. 2019 a las 17:43
  • no, la funcion tienes que quitar "horarios" y dejar solo "#" para que se ejecute en todos los href que tengan "#" y luego donde quieras que te lleve tienes que ponerle el id, osea que quieres que te lleve a el div juanito "<div id=juanito>", desde donde quieres que vaya le pones el "href=#juanito"
    – KeTeMeTo
    el 6 jun. 2019 a las 18:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.