facebook
twitter

Creando conocimiento para dar un paso adelante

jQuery scrollto, ir automáticamente a una sección en otra página

marzo 20 2012

Muchos ya han escuchado del plugin jQuery Scrollto, que básicamente lo que hace es que con un clic, puedas ir a una sección de una página a otra mediante un suave desplazamiento especificando el “div” al cual se quiere llegar. Este plugin es muy usado para diseñar sitios web verticales (y también horizontales), donde varias secciones del sitio web están contenidas en una sola página, de esta forma cuando el usuario entra al sitio web, no necesita cargar todas las páginas que desea ver, sino que solo con dar clic en un link (generalmente contenido en un menú), dicho usuario se pueda desplazar a la sección que quiera ver.

Este plugin es muy útil, sin embargo existen problemas cuando se trata de implementar en un sitio web dinámico (por ejemplo WordPress, que será el caso que pongamos de ejemplo). Muchos sitios web actualmente se construyen en este sistema dada su flexibilidad (si bien, fue concebida para crear blogs, ahora es muy útil para crear sitios web enteros), pero por ejemplo, es imposible desplegar un artículo completo en una misma página; necesariamente tiene que cargar otra a la hora de abrir un artículo, o bien, a la hora de poner comentarios. Entonces suponiendo que queremos hacer una página totalmente vertical, la cual será index.php (sea WordPress o una página estática) y anidar ahí todas las secciones del sitio, además de colocar las noticias más recientes ¿Qué haremos cuando carguemos otra página y luego queramos volver a una sección de la página principal?

Se podría poner algo así:

1
<a href="www.tusitio.com/#contacto">

El problema es que a la hora de usar el plugin de jQuery Scrollto, esa acción por alguna razón se inhabilita y nos carga la página desde el inicio. Pero para eso realicé un código que hace funcionar el jQuery Scrollto desde otra página.

Primero, lo que vamos a hacer, es instalar los plugins en nuestra librería Javascript. Primero descargaremos jQuery, para ahorrarse un poco de ancho de banda para su página, pueden jalarlo desde Google y pegamos este código antes del <head>:

1
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Luego descargaremos aquí el jQuery Scrollto y también el init.js que necesitaremos para que funcione. Estos links te abrirán una página con un código, los copias y en el programa que uses para programar, ya sea Dreamweaver o Notepad++ o el que sea, pegas dicho código y lo guardas, el nombre no tiene que ser exáctamente el mismo, en lugar de ser por ejemplo jquery.scrollTo-1.4.2.js, lo puedes nombrar scrollto.js, nada más que con ese mismo nombre que usaste lo tendrás que llamar desde tu plantilla.

Ya que los tienes guardados (crea un subdirectorio llamado js para mayor comodidad y orden), los vas a llamar de esta forma a tu página y al igual que colocaste el plugin de jQuery los pondrás dentro de la etiqueta zhead> y antes de

Si es una página estática, así sería:

1
2
<script type="text/javascript" src="js/scrollto.js"></script>
<script type="text/javascript" src="js/init.js"></script>

En caso de que uses WordPress, al estar los javascript en tu plantilla necesitas usar una sencilla función de WordPress llamada bloginfo(‘template_directory’) para que WordPress pueda acceder directamente a tu plantilla, así quedarían las cosas:

1
2
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/"js/scrollto.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/init.js"></script>

Estas las tienes que instalar en el header de tu página principal, donde se encuentra la plantilla donde estás haciendo utilizando el plugin scrollto.

Ahora vamos a ir a la otra página, la que no puede estar dentro de la página principal, por ejemplo en WordPress serían single.php (que te muestra el artículo completo) category.php (que te muestra los artículos por categoría) entre muchos otros. Para esto haz una copia del archivo header.php, si no usas wordpress de todos modos te recomiendo que todo lo que va en el header y se repite en todas las páginas lo guardes como header.php y en todas las demás páginas lo llames con la siguiente función:

1
include ('header.php');

El segundo header será diferente al primero porque los links del menú van a cambiar. En el header principal estarás usando la función scrollto para navegar en la página principal. Se supone que los tienes así.

1
<a href="="javascript:$.scrollTo('#principalweb', 800, {offset:{top:-50}})"

Este segundo header usarás otra forma para los links y en este caso utilizarás links dinámicos, para que al ser enviados se puedan reconocer y por medio de un poco de programación decirle a que sección de la página principal debe de ir. Esta copia renómbrala, ponle header2.php o lo que sea. Una cosa, es que en WordPress no podras usar la función wp_header() para llamarlo, porque ese llamará al header principal, en este caso, al segundo header lo llamarás así:

1
<?php include (TEMPLATEPATH . '/header2.php'); ?>

Esta función la podrás usar cuando quieras llamar secciones diferentes a las principales, como un sidebar alternativo o un footer alternativo. Regresando a los links dinámicos, todos los links tienen que dirigir a la página principal, pero utilizaremos links dinámicos para que con un código pueda reconocer el sistema cual es cual e indicarle a que sección ir. Podríamos usar por ejemplo el Acerca de para llamar a la sección, pero con jQuery Scrollto se inhabilita esa característica, y además la función que utilizaremos para reconocer las URL no reconoce las direcciones ancladas. Entonces los menús del header alternativo irán así:

Imaginemos que tenemos tres links en el menú. “Acerca de”, “Proyectos” y “Contacto”.

Los llamaremos por ejemplo

1
2
3
 <a href="www.tusitio.com/?pagina=acerca_de">Acerca de</a>
 <a href="www.tusitio.com/?pagina=proyectos">Proyectos</a>
 <a href="www.tusitio.com/?pagina=contacto">Contacto</a>

En el header alternativo ya está todo preparado, entonces iremos al header principal a meter el código de programación que reconocerá los links dinámicos y al hacer esto te direccionará a la sección que quieres ir. Cabe recordar que sepas cual es el contenedor (div) que concentra cada sección, porque harás uso de este para que por medio de una llamada al DOM sepas a donde vas a dirigirte.

Ahora entre las etiquetas y haremos la programación, en PHP para reconocer las páginas dinámicas y asignarle un valor a la variable en función de estas, y en jQuery que se encargará de la ejecución. Vamos primero con el PHP.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?php
//Con este archivo vamos a pedirle al sistema que nos de la URL,
 la cual es una URL dinámica que asignamos en el menú del header alternativo
 y esa URL la vamos a guardar en una variable.
$url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; 
 
//Ten cuidado al ver como guarda la url, no es lo mismo si tu sitio
aparece en el navegador como tusitio.com, como http://tusitio.com
o bien como http://www.tusitio.com. Modifica la sentencia en las comillas
donde puse "http://" para dejarlo tal y como es tu dominio, de lo
contrario no va a funcionar
 
// Nuestra variable la llamamos $url y su valor es la URL de tu sitio, 
que en este caso si entraste desde el link dinámico, su valor será 
dicho link dinámico. 
Ahora lo que haremos es utilizar la función en php de Switch (si están
más familiarizados con las condiciones "if" "elseif" también las pueden
usar. Así quedaría.
 
switch($url) {
	case "tusitio.com":
	$page = "inicio";
	break;
	case "tusitio.com/?pagina=acerca_de":
	$page = "acerca_de";
	break;
	case "tusitio.com/?pagina=proyectos":
	$page = "proyectos";
	break;
	case "tusitio.com/?pagina=contacto":
	$page = "contacto";
	break;
	default:
	$page = "inicio";
}
 
// De esta forma, la variable $page contendrá la página dinámica por la
que entramos. Para evitar cualquier problema, y comprobar que funciona bien,
cerciórate de que $page (o como hayas llamado a la variable) contenga la 
información correcta haciendo un "echo".
?>

Ahora ya teniendo $page como la variable que contiene el URL dinámico por el que entramos al sitio principal, vamos a utilizar jQuery para realizar la ejecución. En este caso utilizaremos también la función Switch que es prácticamente idéntica que en PHP (también pueden usar las condiciones if, elseif, en este caso si así lo desean.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// En este caso la variable será $currentobject, si no conocen Javascript 
es un tanto diferente al hacer la declaración de variables, como lo pueden
ver a continuación. En mi caso, por alguna maña primero declaré la variable
sin ningún valor, y luego le di el valor a la variable, el mismo valor que
tiene $page.
$(document).ready(function(){
	var $currentObject = null;
	var $currentObject = "<?php echo $page?>";
	switch($currentObject) {
		case 'acerca_de':
		$.scrollTo('#acerca_de', 800, {offset:{top:-50}});
		break;
		case 'proyectos':
		$.scrollTo('#proyectos', 800, {offset:{top:-50}});
		break;
		case 'contacto':
		$.scrollTo('#contacto', 800, {offset:{top:-50}});
		break;
	}
});
 
//Vemos que dependiendo del valor de $currentObject al que le asignamos el 
valor de $page, lo que quiere decir que $currentObject ahota contiene
la URL dinámica. El código jQuery ejecutará el scroll dependiendo de la 
página dinámica que le asignamos. Con esto ya debe de funcionar a la 
perfección, y lo pueden comprobar en mi página que está construída de esa
manera, aunque si leiste el artículo recién lo publiqué como mi sitio 
todavía no está terminado, solo te funcionarán los primeros 3 links. 
Si tienes algún problema con la variable, mediante un alert asegúrate que
la variable tiene la información indicada, coloca la sentencia justo antes
del comienzo del Switch, y después de que hayas declarado la variable.
 
alert ($currentObject);

Ahora todo debe de funcionar a la perfección, si no entiendes bien como funciona el jQuery Scroll visita su página oficial. Por ejemplo, yo a la función scrollTo le coloqué una orden llamada “offset” para que al ir a la sección la baje 50 pixeles, esto porque tengo una barra inmovil arriba (lo cual se hace con el CSS position:fixed;) que mide 50 pixeles.

Espero que el tutorial les funcione, cualquier duda háganmelo saber.

5 Comentarios

Dejar un comentario

Nombre (requerido)

Correo (No será publicado) (requerido)

Sitio Web / Twitter

Comentarios

  1. Jose Montenegro dice:

    Hola quiero hacer una pagina en html que tiene categorias y las categorias tienen sus propios contenidos, la idea es que las categorias sean paginas con su home y tambien se desplace para mostrar los diferentes contenidos se puede lograr en html o hay que usar php?

  2. Gemma dice:

    muy bueno tu comentario.
    quizá me puedas ayudar en un problema que tengo.
    he realizado un scroll simple para mostrar un listado de artículos, y dentro de la lista meto datos de referencia descripción, imagen etc… lo que quiero simplemente es que se ejecuten los a enlaces de páginas externos y por más que busco no logro encontrar nada, acaso no es posible con este control? es lo que te digo que el ejemplo no me va a ningún sitio se me desplaza el scroll y listo.
    si pudieras ayudarme sería fantástico.

    un saludo y gracias por tu aporte.

  3. Marc dice:

    Hola, podrías poner una demo sencilla?

    Estoy intentando hacer una web que empieza con unas animaciones hechas con jquery hasta que llega a la primera pagina de la web. Des de allí quiero ir cargando las secciones de la web con un scroll horizontal. Una de las secciones seria un CMS (wordpress supongo).

  4. Genbu dice:

    Hola muy bueno, pero como se aplica en paginas en html puro, algo mas claro, utilizo una hoja entera de contenido, en la cual hay información mas detallada, que habré una nueva hoja, pero cuando le den “regresar” o a alguna opción del menu, regresen al index y en la sección donde le dieron clic, por ejemplo me encuentro en la pagina detalla de servicios, cuando le de clic a la opción del menu, locales, que se encuentra dentro de la pagina principal del index, me encuentro usando este ejemplo:

    http://www.demo.pagescroller.com/

    supongamos que dentro de la sección de “Featured Work”, hay un link a otra pagina, dentro de esa pagina leo la información y todo eso, pero por ejemplo si le doy clic a “Our History” que se encuentra en index, me podría llevar a esa sección exclusiva? esto es posible… o estoy soñando?

    ajajajaj Saludos Desde Perú!!!

  5. admin dice:

    El problema es que acá si es necesario PHP para poder dirigirte de una página a otra.

¿Ya conoces nuestro trabajo? Revisa nuestro portafolio de proyectos:


Regresar al índice de artículos

¡Tú tienes el talento, nosotros te damos las herramientas para llevar tu proyecto al éxito!