Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 8 de 8

Tema: Ayuda con script para hacer scrollTo (NUEVO Y PREGUNTADO MAS SIMPLE)

  1. #1
    Me va gustando esto... Habitante
    Fecha de Ingreso
    05 jul, 12
    Mensajes
    94
    Poder de Reputación
    8

    Ayuda con script para hacer scrollTo (NUEVO Y PREGUNTADO MAS SIMPLE)

    Estimados...
    Hace pocos días abrí un post que fue muy visitado pero creo que mi pregunta era muy compleja con la descripción. Trataré de hacerla más simple.
    Este script se usa para hacer que el clic a un enlace que dirige a una div dentro de la misma página haga el scroll hasta una posición calculada específicamente.

    ...... funciona bien cuando está dentro de una página en la zona del Head pero no cuando está en una función en un archivo js externo.

    Al cliquear el enlace con una "href="#DIVPARASCROLL" dentro de la misma página se ejecuta lo siguiente.

    Código:
    <script>
     	var nombre = "#"+ "DIVPARASCROLL;
            var x = $(nombre).offset();
            alert("Top: " + x.top + " Left: " + x.left);
            
            var elemaltu = document.getElementById("DIV_ENCABEZADO");
    	var h = elemaltu.offsetHeight;
    
            var b = x.top - h;
            window.scrollTo(0, b);
    </script>
    Hasta aquí todo va bien y esto hace el scroll hasta la posición en forma correcta.

    PERO CUANDO USO EL MISMO SCRIPT EN UNA FUNCIÓN DENTRO DE UN ARCHIVO JS, YA NO FUNCIONA BIEN

    Código:
    function scrolloff(valor) {
     	var nombre = "#"+ "DIVPARASCROLL;
            var x = $(nombre).offset();
            alert("Top: " + x.top + " Left: " + x.left);
            
            var elemaltu = document.getElementById("DIV_ENCABEZADO");
    	var h = elemaltu.offsetHeight;
    
            var b = x.top - h;
            window.scrollTo(0, b);
    }
    Todo va bien hasta que termina el scrollTo pero luego viene lo que no entiendo y no quiero que ocurra

    Ahora descubrí que el SCROLLTO se ejecuta bien, hace el scroll hasta la posición indicada y la DIVPARASCROLL queda bien posicionada...
    ... pero........
    ... al terminar el script, es como que continuase la acción del click dado en el enlace, y el scroll va al tope de página (como sucede normalmente al cliquear enlaces internos a una página) y lleva a la DIV (en un segundo movimiento final despues del scrollTo) al tope de página, fuera de la posición calculada que alcanzó con el scrollTo.

    O sea... estando en el archivo js externo hace un scrollTo correcto, y luego aunque termina el script, hace otro Scroll como un scrollTop

    ¿Cómo se puede hacer para que este segundo movimiento no ocurra?
    Socorro !!!!!!
    Muchas gracias y disculpen las molestias!!!!!!!
    GusSiglo21

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,043
    Poder de Reputación
    21
    Hola!

    Pon el script con la función justo antes de </body> y ve cómo te va.

  3. #3
    Me va gustando esto... Habitante
    Fecha de Ingreso
    05 jul, 12
    Mensajes
    94
    Poder de Reputación
    8
    Cita Iniciado por skaparate Ver Mensaje
    Hola!

    Pon el script con la función justo antes de </body> y ve cómo te va.
    --------------------------------
    GRACIAS SKAPARATE
    Tu me has ayudado varias otras veces y te agradezco siempre estar ahí con tu gentileza.

    Te comento que he hecho lo que me dices (es lo que puse en el primer ejemplo) y justamente así funciona bien.

    Lo que quisiera es ponerlo en un script general que uso para mis webs responsive.
    Ya lo he probado en otro .js (aparte del .js general) y también tiene el mismo defecto.

    Parece que solamente no se produce el segundo scroll (el que pone en scrollTop la div) cuando está inserto en la propia página como tú dices.

    Lo detecté poniendo un "alert" que me de el valor de la variable "b" luego del scrollTo.
    Cuando se ejecuta ese alert luego del scrollTo, se ve que el scrollTo pone la div en la posición que deseo pero..........

    ... eso detiene todo un instante, el alert muestra el valor y luego, en vez de cerrar el script (como debería ser) parece que quedara "algo remanente" que hace que en vez de dejar la página "scrolleada" (como queda luego del scrollTo), hace una operación adicional de Scroll que la mueve arriba de todo.

    Es muy raro porque luego del ScrollTo no hay otra instrucción.

    Quiero hacer esto porque he notado en muchos sistemas de encabezado flotante un defecto en el que si quieres ir a un tema dentro de la propia página, en todos esos sistemas la primera línea del tema queda oculta debajo del encabezado.
    Por causa de eso y cansado de probar correcciones, decidí hacerlo yo mismo y lo conseguí, sólo que está con este defecto del "scroll remanente" cuando lo pongo al script en un js aparte.
    Con esto yo consigo que la página se desplace hasta una posición calculada, de modo que la primera línea del tema al que quieres llegar quede justamente abajo del encabezado, pero no oculta, sino visible, debido a que el scroll desplaza todo teniendo en cuenta la altura del encabezado.

    ¿Crees que haya alguna manera de que funcione fuera de la página en un script externo agregándole algoque detenga ese "scroll remanente" que se produce?
    Si es complicado, o si no tienes tiempo , o si directamente es imposible, pues lo pondré directamente en la página y listo.

    De todas maneras igualmente mil gracias por tu ayuda!
    Saludos
    GusSiglo21

  4. #4
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,043
    Poder de Reputación
    21
    A lo que yo me refería era hacer esto:

    Código HTML:
    <body>
      <!-- contenido de tu web -->
      <script src="scrolloff.js"></script>
    </body>
    De esta forma te aseguras que todo el contenido previo a la ejecución del script se haya cargado. Revisa este ejemplo para que veas si te sirve y es lo que quieres: https://plnkr.co/edit/TAfxYdmd8dE6zFqWEE7z

  5. #5
    Me va gustando esto... Habitante
    Fecha de Ingreso
    05 jul, 12
    Mensajes
    94
    Poder de Reputación
    8
    Cita Iniciado por skaparate Ver Mensaje
    A lo que yo me refería era hacer esto:

    Código HTML:
    <body>
      <!-- contenido de tu web -->
      <script src="scrolloff.js"></script>
    </body>
    De esta forma te aseguras que todo el contenido previo a la ejecución del script se haya cargado. Revisa este ejemplo para que veas si te sirve y es lo que quieres: https://plnkr.co/edit/TAfxYdmd8dE6zFqWEE7z

    Hola Skaparate

    Intenté cambiando el lugar del llamado al script donde me dijiste, al final del body, pero el defecto persiste .
    Al terminar el script, continúa la acción del click y el scroll va al tope de página.

    No entiendo por qué ocurre lo que ocurre con ese scroll espúreo luego de un scrollto a la posición precisa.

    Bueno, .......... no se, creo que ya me cansó.
    Lo que haré es poner ese script en cada página y listo. De esa manera funciona como quiero y ya está.
    Si por acaso tuvieses alguna nueva idea, será bienvenida y la probaré, y sino deja y no te preocupes.

    De todas maneras te agradezco muchísimo tu tiempo y la ayuda que me diste.
    Un abrazo!
    GusSiglo21

  6. #6
    Me va gustando esto... Habitante
    Fecha de Ingreso
    05 jul, 12
    Mensajes
    94
    Poder de Reputación
    8
    Cita Iniciado por skaparate Ver Mensaje
    A lo que yo me refería era hacer esto:

    Código HTML:
    <body>
      <!-- contenido de tu web -->
      <script src="scrolloff.js"></script>
    </body>
    De esta forma te aseguras que todo el contenido previo a la ejecución del script se haya cargado. Revisa este ejemplo para que veas si te sirve y es lo que quieres: https://plnkr.co/edit/TAfxYdmd8dE6zFqWEE7z
    ------------------------------------

    DISCULPA SKAPARATE, MIRA LO QUE HE ENCONTRADO!!!!!!

    Si hago el href de la siguiente manera

    Código:
    href="javascript:void(0)" onclick="scrolloff('DELSCROLL')"
    
    o de esta otra manera
    
    href="javascript:scrolloff('DELSCROLL')"
    SE SOLUCIONA EL PROBLEMA DEL SCROLL "EXTRA"!!!!!!!!!!

    Claro, ahora entiendo.
    Con el enlace href="#NOMBRE_DE_LA_DIV" el onclick del script ejecuta la función que llamo, pero obviamente LUEGO queda pendiente ejecutarse el ir hasta la posición de la div #NOMBRE_DE_LA_DIV.
    Quitándole el nombre #NOMBRE_DE_LA_DIV a la que pretendo llegar, se quita la orden de ir al lugar después de ejecutado el scripty listo.
    Ese era el problema!!!!

    Ahora eso funciona hasta con un js externo viva viva viva!!!!!!! :)

    Si de algo te ayuda esto en alguna de esas cosas raras que a veces ocurren, bueno, espero que esto sea aunque sea un mínimo aporte.

    GRACIAS MUCHAS GRACIAS POR TU AYUDA
    Un abrazo!!
    GusSiglo21

  7. #7
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,043
    Poder de Reputación
    21
    Lo que dices es cierto, pero no es la respuesta.

    Lo que haces es lo mismo que esto:

    Código:
    jQuery(document).ready(function($) {
        $('a').on('click', function(e) {
            e.preventDefault();
        });
    
        // Esto es lo mismo que lo anterior:
        // $('a').on('click', function(e) {
            // return false;
        // });
    });
    En estos bloques, lo que haces es decirle al navegador que se detenga una vez que haya terminado la función, de lo contrario, si hay más de un elemento 'a', la función se ejecutará por cada uno de ellos.

    ¿Por qué a ti no te funcionó? La verdad no sé, pues no me has mostrado el código html completo ni cómo ejecutas la función scrolloff, así que no podría ayudar mucho :P.

  8. #8
    Me va gustando esto... Habitante
    Fecha de Ingreso
    05 jul, 12
    Mensajes
    94
    Poder de Reputación
    8
    Disculpa no me di cuenta de mostrarlo todo en su momento
    ahora ya le hice varias modificaciones :(

    Probé con un return false pero tampoco funcionó.
    Gracias de todas maneras!!!!!
    Un abrazo
    GusSiglo21

Temas Similares

  1. Ayuda con script para hacer scrollTo
    Por gussiglo21 en el foro Scripts
    Respuestas: 0
    Último Mensaje: 17/08/2016, 23:04
  2. Algun programa simple para hacer banner
    Por Matusalen en el foro Estadísticas y Contadores de Visitas
    Respuestas: 4
    Último Mensaje: 09/10/2012, 00:28
  3. Respuestas: 12
    Último Mensaje: 14/09/2010, 00:09

Etiquetas para este Tema

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •