Mejorar la navegación en CSS y lograr desplazamiento suave al hacer clic en el indice

iniciopublic · 26 Oct 2017

Hola , tengo un indice o tabla de contenidos en css y html

<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 es que al darle click a un link del indice me envía al subtitulo h3 pero esta muy arriba del navegador ¿como hago para bajarlo y no llegue hasta arriba? como hago que la navegación sea suave al darle click al vinculo del indice

Le agradezco sus respuestas

josmanmx · 26 Oct 2017

Si te refieres a como hacer para que al dar Link se mueva progresivamente, eso se hace con JavaScript, hay librerías y frameworks que te ayuda con eso...

Por ejemplo esta: Smooth Scroll

Aquí hay una guía bastante buena de como hacerla con jquery: Smooth Scrolling | CSS-Tricks

Éxito! 🙂

Mejorar la navegación en CSS y lograr desplazamiento suave al hacer clic en el indice

iniciopublic

josmanmx