Foros del Web » Creando para Internet » CSS »

Como hago que me muestre el titulo un poco antes

Estas en el tema de Como hago que me muestre el titulo un poco antes en el foro de CSS en Foros del Web. Creo que no me se explicar bien Tengo una tabla de contenido en css es la siguiente Cita: <div id="indice"> <ul> <li> <a href="#css">CSS</a> </li> ...
  #1 (permalink)  
Antiguo 26/10/2017, 16:23
 
Fecha de Ingreso: julio-2013
Mensajes: 309
Antigüedad: 10 años, 11 meses
Puntos: 2
Como hago que me muestre el titulo un poco antes

Creo que no me se explicar bien

Tengo una tabla de contenido en css es la siguiente

Cita:
<div id="indice">
<ul>
<li>
<a href="#css">CSS</a>
</li>
<li>
<a href="#html5">HTML5</a>
</li>
<li>
<a href="#php">PHP</a>
</li>
</ul>
</div>
<section>
<h3 id="css">Tutorial de CSS</h3>
<div class="section-content">
Un texto MUY largo....
</div>
</section>
<section>
<h3 id="html5">HTML 5</h3>
<div class="section-content">
Otro texto muy largo sobre HTML5
</div>
</section>
<section>
<h3 id="php">PHP</h3>
<div class="section-content">
Otro texto muy largo sobre PHP
</div>
</section>
El problema que al darle click al link y me envia en al parte donde esta el <h3></h3> me lo muestra en la parte superior de la pantalla del navegador , como hago que me muestre un poco mas abajo y que cuando me lleve al link lo haga lentamente

No se si es posible con css o javascript, le agradezco sus respuestas
  #2 (permalink)  
Antiguo 27/10/2017, 11:05
Avatar de g3kdigital  
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 208
Antigüedad: 10 años, 7 meses
Puntos: 39
Respuesta: Como hago que me muestre el titulo un poco antes

Este snippet de javascript te puede servir:

Código Javascript:
Ver original
  1. $('nav a').click(function(e){              
  2.         e.preventDefault();     //evitar el eventos del enlace normal
  3.         var strAncla=$(this).attr('href'); //id del ancla
  4.     var $distance = - 50; //distancia en pixeles desde el objetivo
  5.     var $tiempo = 1000; //tiempo en segundos => 1000 = 1seg
  6.             $('body,html').stop(true,true).animate({               
  7.                 scrollTop: $(strAncla).offset().top+$distance
  8.             },$tiempo);    
  9.     });

Eso sí, esto usa Jquery, así que tienes que vincular la librería a u proyecto. No se mucho de javascript, por lo que no te puedo dar un snippet completamente vanilla, pero sería una mejor opción porque cargar una librería como jquery para solo hacer este efecto, no vale la pena.

Edito: Si entiendes más de programación que yo, te dejo un enlace a este post: https://escss.blogspot.com.co/2016/0...to-css-js.html donde con solo js imitan el efecto, espero te sirva.
__________________
Puedes ser el tipo de persona que se amarga por lo inevitable o aceptar el reto de superarse siempre e ir a la par con el progreso.

WEB: G3K.co | codepen.io/g3kdigital

Última edición por g3kdigital; 09/11/2017 a las 14:08 Razón: El ultimo número de ese snipet es para controlar los segundos, en este caso 1000 = 1segundo.

Etiquetas: class, javascript, poco, titulo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:58.