Ya no necesitas buscar más por otras páginas ya que has llegado al espacio justo, contamos con la respuesta que necesitas y sin problema.
Solución:
Utilizando el scroll-behavior Propiedad CSS:
(que es compatible con los navegadores modernos pero no Borde):
a
display: inline-block;
padding: 5px 7%;
text-decoration: none;
nav, section
display: block;
margin: 0 auto;
text-align: center;
nav
width: 350px;
padding: 5px;
section
width: 350px;
height: 130px;
overflow-y: scroll;
border: 1px solid black;
font-size: 0;
scroll-behavior: smooth; /* <----- THE SECRET ---- */
section div
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 8vw;
1
2
3
Puede encontrar la respuesta a su pregunta en la siguiente página:
https://stackoverflow.com/a/17633941/2359161
Aquí está el JSFiddle que se le dio:
http://jsfiddle.net/YYPKM/3/
Tenga en cuenta la sección de desplazamiento al final del CSS, específicamente:
/*
*Styling
*/
html,body
width: 100%;
height: 100%;
position: relative;
body
overflow: hidden;
header
background: #fff;
position: fixed;
left: 0; top: 0;
width:100%;
height: 3.5rem;
z-index: 10;
nav
width: 100%;
padding-top: 0.5rem;
nav ul
list-style: none;
width: inherit;
margin: 0;
ul li:nth-child( 3n + 1), #main .panel:nth-child( 3n + 1)
background: rgb( 0, 180, 255 );
ul li:nth-child( 3n + 2), #main .panel:nth-child( 3n + 2)
background: rgb( 255, 65, 180 );
ul li:nth-child( 3n + 3), #main .panel:nth-child( 3n + 3)
background: rgb( 0, 255, 180 );
ul li
display: inline-block;
margin: 0 8px;
margin: 0 0.5rem;
padding: 5px 8px;
padding: 0.3rem 0.5rem;
border-radius: 2px;
line-height: 1.5;
ul li a
color: #fff;
text-decoration: none;
.panel
width: 100%;
height: 500px;
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
.panel h1
font-family: sans-serif;
font-size: 64px;
font-size: 4rem;
color: #fff;
position:relative;
line-height: 200px;
top: 33%;
text-align: center;
margin: 0;
/*
*Scrolling
*/
a[ id= "servicios" ]:target ~ #main article.panel
-webkit-transform: translateY( 0px);
transform: translateY( 0px );
a[ id= "galeria" ]:target ~ #main article.panel
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
a[ id= "contacto" ]:target ~ #main article.panel
-webkit-transform: translateY( -1000px );
transform: translateY( -1000px );
Nuestros Servicios
Mustra de nuestro trabajos
Pongamonos en contacto
Si bien algunas de las respuestas fueron muy útiles e informativas, pensé en escribir la respuesta que se me ocurrió. La respuesta de Alex fue muy buena, sin embargo, es limitada en el sentido de que la altura del div debe estar codificada en CSS.
Entonces, la solución que se me ocurrió usa JS (sin jQuery) y en realidad es una versión simplificada (casi al mínimo) de soluciones para resolver problemas similares que encontré en Statckoverflow:
HTML
blabla
blabla
blabla
blabla
TENGA EN CUENTA EL "REGRESO FALSO"; en la llamada de clic. Esto es importante si desea evitar que su navegador salte al enlace en sí (y dejar que el efecto sea administrado por su JS).
Código JS:
Es increíblemente simple. Encuentra la posición vertical del div en el documento usando su ID único (en la prueba de función). Luego llama a la función scrollTo pasando la posición de inicio (document.body.scrollTop) y la posición de destino (dest.offsetTop). Realiza la transición utilizando algún tipo de curva de entrada y salida.
Gracias a todos por su ayuda.
Saber un poco de codificación puede ayudarlo a evitar bibliotecas (a veces pesadas) y brindarle (al programador) más control.
Si para ti ha resultado de provecho este post, sería de mucha ayuda si lo compartieras con más desarrolladores de este modo nos ayudas a difundir nuestro contenido.