Como enfocar div al hacer click en link

lightning2014 · #1 (**permalink**) 18/05/2014, 11:24

Tengo alrededor de 5 links , quiero que al hacer click en cada link el navegador enfoque el div al cual dirige el enlace, algo parecido a esos plugins que al momento de desplazarte hacia abajo te aparece una flecha que dice: "ir hacia arriba".

Italico76 · #2 (**permalink**) 18/05/2014, 12:27

Algo asi ?

Código HTML:

Ver original<head>
<style>
    div {height: 200px;}
</style>
</head>
 
<body>
    <a href="#Fin">Ir a Fin</a>
    <p/>
    <div ><A name="Comienzo"/>
    La vida es bella</div>
    
    <div>
    La vida es un tanto aburridora</div>
    
    <div><A name="Fin"/>
    La vida es muy mamona</div>
 
    <p/>
    <a href="#Comienzo">Ir a Comienzo</a>
</body>

Alexis88 · #3 (**permalink**) 18/05/2014, 17:32

Te refieres a crear anclas. Es un procedimiento sencillo, basta con que a cada elemento al que quieres dirigirte, le asignes un Id (recordando que el Id debe de ser único), mientras que en el atributo href de los enlaces, colocas el Id del elemento en cuestión pero con el signo de numeral # antes de este.

Código HTML:

Ver original<a href = "#uno">Ir a la sección 1</a>
<a href = "#dos">Ir a la sección 2</a>
<a href = "#tres">Ir a la sección 3</a>
 
<section id = "uno"></section>
<section id = "dos"></section>
<section id = "tres"></section>

Mientras que lo segundo, se trata de una imagen o elemento HTML oculto y con posición fija, que se hace visible cuando la barra de desplazamiento se ha desplazado cierta cantidad de píxeles hacia abajo. Luego, cuando se le da un clic, se realiza el scrolling (movimiento de la barra de desplazamiento) hacia el inicio de la página.

Código Javascript:

Ver originalvar arriba = document.getElementById("arriba"), //Ocultado previamente con CSS
    body = document.body;
 
window.addEventListener("scroll", function(){
    if (this.scrollY > 80)
        arriba.style.opacity = 1;
    else
        arriba.style.opacity = 0;
}, false);
 
arriba.addEventListener("click", function(){
    body.scrollTop = 0;
}, false);

En el script, tomamos al elemento que nos servirá de botón para subir y al cuerpo del documento. Luego, cuando se haga scroll en la ventana, verificamos la cantidad de píxeles desplazados hacia abajo en el eje Y; si dicha cantidad es mayor a 80 (o la cantidad que elijas), mostramos al botón para subir, caso contrario, lo ocultamos. Cuando se le de un clic a dicho botón, asignamos el valor cero al scroll vertical del cuerpo del documento, con lo cual, la barra de desplazamiento vertical, quedará situada en su posición original.

DEMO
Código

Saludos

Italico76 · #4 (**permalink**) 18/05/2014, 18:20

@Alexis88 te hago una consulta:

Para cada "ejercicio" resuelto que das creas todos esos CSS a mano o usas algun framework ? o tienes como tu propio repositorio para cortar y pegar estilos ?

Buen ejemplo!

Alexis88 · #5 (**permalink**) 18/05/2014, 18:35

Yo suelo hacer todo desde cero, tanto el back-end como el front-end, a lo mucho uso jQuery por algunos métodos interesantes que tiene, pero ya aprendí a emular muchos de ellos con JS nativo. Con CSS no tengo problemas.

Saludos

Italico76 · #6 (**permalink**) 18/05/2014, 18:55

Si veo que eres bueno en CSS tambien

Gracias y un abrazo