Consulta acerca de las ANCLAS

LeoNicoPerez · #1 (**permalink**) 31/03/2015, 08:39

Hola amigos, una pregunta...

Estoy manejandome con anclas para subir o bajar
a través del contenido en mi sitio.

El tema es que si a un enlace le pongo href="#HOLA"
para ir al elemento identificado como HOLA, al darle
click y por consiguiente me lleva a dicho elemento,
en la barra de direcciones aparece:

misitio.com#HOLA

Quiero saber si hay alguna forma de que la barra de
direcciones no cambie...

Puntuaré y agradeceré la ayuda que me den!!
Abrazo y quedo a la espera de respuestas!!.

mardojai · #2 (**permalink**) 31/03/2015, 12:02

Amigo con este código puedes animar los enlaces internos y eliminar el "#" del url:

Código:

$(document).ready(function(){
    linkInterno = $('a[href^="#"]');
    linkInterno.on('click',function(e) {
        e.preventDefault();
        var href = $(this).attr('href');
        $('html, body').animate({ scrollTop : $( href ).offset().top}, 'slow');
    });
});

Saludos!

mardojai · #3 (**permalink**) 31/03/2015, 12:08

Olvide mencionar que es Jquery xD, así que tendrás que incluirlo en tu head:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Saludos!

LeoNicoPerez · #4 (**permalink**) 31/03/2015, 14:46

Wow, excelente!! Lo probaré y te cuento cómo me fue!!
Una consulta, ésto de jQuery afecta a usuarios que tengan
desactualizados sus navegadores?? (o no tiene nada que ver??),
pesa mucho ese archivo que se consulta mediante el script del head??

mardojai · #5 (**permalink**) 31/03/2015, 14:54

Es un archivo externo y no pesa mucho por lo que no deberías de tener problema con la carga de tu página.

En total tendrías que poner esto en tu head:

Código HTML:

Código:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    linkInterno = $('a[href^="#"]');
    linkInterno.on('click',function(e) {
        e.preventDefault();
        var href = $(this).attr('href');
        $('html, body').animate({ scrollTop : $( href ).offset().top}, 'slow');
    });
});
</script>

Trabaja con todos los navegadores que soportan Javascript, es caso que no sea así (aunque es ley que todos los navegadores soporten js) las anclas funcionarían como de costumbre.

Saludos! espero tu respuesta para ver como te fue.

LeoNicoPerez · #6 (**permalink**) 31/03/2015, 18:09

Gracias por tu ayuda bro, el archivo externo pesa unos 100KB, no??
Hay alguna forma de que se guarde en la caché o algo de los usuarios para
que se descargue una sola vez y no cada vez que el usuario entra al sitio??

Porque te cuento, el sitio web completo pesa 40KB
y no se hasta que punto me conviene xD

mardojai · #7 (**permalink**) 31/03/2015, 19:15

Pero al ser externo, no se en que podría afectarte, ya que el usuario carga el archivo de otra página y no de tu server.

En todo caso está este código para el .htaccess en servers apache.

Código Apache:

Código:

<FilesMatch "\.(js|css)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"
</FilesMatch>

El "172800" equivale a 2 días en segundos, osea lo que durara el cache. Pero para que eso funcione creo tendrías que tener el archivo de Jquery en tu server junto a los archivos de tu web.

Seria que descargues este archivo: http://code.jquery.com/jquery-2.1.3.min.js y lo enlaces localmente.

Igual no creo que tengas problemas ya que el archivo se aloja en la web de Jquery y no en la tuya.

Saludos!

mardojai · #8 (**permalink**) 31/03/2015, 19:35

En todo caso está este código de Javascript puro.

Código Javascript:

Código:

<script>
var url = window.location.toString();
url = url.split(“#”)[0];
</script>

No lo he probado, así que no te puedo asegurar que funcione xD
Igual está como una opción a usar Jquery

Saludos!

LeoNicoPerez · #9 (**permalink**) 31/03/2015, 20:26

No es por mi, sino por los visitantes del sitio, mientras menos los haga esperar, mejor y es por eso que me preocupaba el tamaño del jQuery. Acá en mi ciudad el internet aun no es muy rápido y hay que optimizar al máximo un sitio web para que no tarde en cargar.

Probaré ambos casos y te comentaré, hoy tuve un día agitado pero ahora tendré tiempo de probar las cosas que me has facilitado, gracias hermano!!

caricatos · #10 (**permalink**) 31/03/2015, 23:34

Hola:

No se me ocurren motivos razonables para querer omitir las anclas en la url; es más, es en mi opinión una información importante, y no dependes de javascript; que por cierto no es necesario usar librerías

.

Saludos

pzin · #11 (**permalink**) 31/03/2015, 23:46

Desde luego es bastante absurdo usar jQuery solamente para un único fin.

mardojai · #12 (**permalink**) 01/04/2015, 06:27

Es cierto, propuse Jquery por un tema mas gráfico, pero si se trata de una web pensada en ligereza y carga rápida, seria mejor usar solo Js.

Pero es cierto lo que dice @caricatos, si es que se trata de una web con contenido abundante y este está dividido por secciones y cada sección tiene un id para el ancla, creo que es información útil para saber sonde estás y poder "linkiar" externamente a esa sección en especifico.

Saludos!

LeoNicoPerez · #13 (**permalink**) 01/04/2015, 10:36

En realidad lo quiero para Ir Arriba e Ir Abajo xD No es una web llena de contenidos xD

mardojai · #14 (**permalink**) 01/04/2015, 10:40

XD Pues ya ves tu, si usa el Jquery para que suba y baje "sensualmente" o solo el Javascript para que no se vean las anclas, o si los dejas... a tu gusto XDD

LeoNicoPerez · #15 (**permalink**) 01/04/2015, 19:04

Sensualmente xD vale, gracias por tooooda la ayuda!! :3

mardojai · #16 (**permalink**) 01/04/2015, 19:13

No olvides marcar el tema como solucionado xD

hackjose · #17 (**permalink**) 01/04/2015, 20:41

Que tal

No dependas de javascript tal como te dicen

Un metodo que te puede ser util es scrollintoview

Saludos

mardojai · #18 (**permalink**) 02/04/2015, 05:12

Cita:

Iniciado por hackjose

Que tal

No dependas de javascript tal como te dicen

Un metodo que te puede ser util es scrollintoview

Saludos

Buen aporte amigo, pero me parece que también es JavaScript xD no sé.

Y en la MDN especifican que es una tecnología aun inestable XD, pero está bien, que el vea si lo pone o no.

https://developer.mozilla.org/en-US/...scrollIntoView

Saludos!

hackjose · #19 (**permalink**) 02/04/2015, 10:40

Obviamente es javascript
Al ser inestable es obvio que el decidira si lo utiliza o no

mardojai · #20 (**permalink**) 02/04/2015, 10:47

Amigo, Lo dije porque escribiste:

"No dependas de javascript tal como te dicen" y propones un método JavaScript xD
Al menos que haya entendido mal lo que querías decir.
Y si, fue un poco obvio lo de que el decide si lo usa.

Saludos!

LeoNicoPerez · #21 (**permalink**) 02/04/2015, 14:23

xD vaya, inestable sería... como que no funciona en todos los navegadores??

NueveReinas · #22 (**permalink**) 02/04/2015, 14:33

Cita:

Iniciado por LeoNicoPerez

xD vaya, inestable sería... como que no funciona en todos los navegadores??

Exactamente.

LeoNicoPerez · #23 (**permalink**) 02/04/2015, 17:45

Osea que me conviene usar éste??

Cita:

LeoNicoPerez · #24 (**permalink**) 02/04/2015, 17:52

Y si la respuesta fuera SI, ese script va en el Head?? O al final del Sitio??

hackjose · #25 (**permalink**) 02/04/2015, 21:04

Va donde tu quieras, en serio
Pero no es la solucion mas optima

mejor usar smooth scrolling

Aqui usan Jquery pero puedes "traducir" ese codigo a javascript puro para que no tengas que usar Jquery

saludos

LeoNicoPerez · #26 (**permalink**) 02/04/2015, 22:54

Hey, gracias!! Por qué dices que es mejor el Smooth que la otra solución??
(sólo curiosidad, quiero aprender xD), aunque la verdad es que no sabría como
traducir ese código a javascript :S

NueveReinas · #27 (**permalink**) 03/04/2015, 00:01

No entiendo por qué algunos dicen que no deberías usar jQuery...

pzin · #28 (**permalink**) 03/04/2015, 02:52

Aquí tienes algo hecho y explicado con JavaScript: https://coderwall.com/p/hujlhg/smoot...without-jquery

Cita:

Iniciado por NueveReinas

No entiendo por qué algunos dicen que no deberías usar jQuery...

Porque cargar 100kbs solo para eso es mala praxis.

hackjose · #29 (**permalink**) 03/04/2015, 09:49

Cita:

Iniciado por LeoNicoPerez

Hey, gracias!! Por qué dices que es mejor el Smooth que la otra solución??
(sólo curiosidad, quiero aprender xD), aunque la verdad es que no sabría como
traducir ese código a javascript :S

De hecho la otra solución no sirve, por que solo tomas la parte de la url que te interesa pero después ya no haces nada

Podrias usar el smooth o talvez puedas usar el .htaccess para sobre escribir la url

saludos