none
jquery - Efecto 'animate' para realizar un scroll RRS feed

  • Pregunta

  • En la página maestra tengo el siguiente código:

    <script type="text/javascript">        
            var amountScrolled = 300;
            $(window).scroll(function () {
                if ($(window).scrollTop() > amountScrolled) {
                    $('a.back-to-top').fadeIn('slow');
                } else {
                    $('a.back-to-top').fadeOut('slow');
                }
            });
            $('a.back-to-top, a.simple-back-to-top').click(function () {                        
                    $('html, body').animate({ scrollTop: 0 }, 1200);
                    return false;
                });
        </script>

    Cuando realizo click sobre el botón, el scroll lo realiza perfectamente, pero no el efecto de animación.

    Alguna idea?. Gracias.

    jueves, 8 de diciembre de 2016 8:09

Respuestas

  • Buenas Daniel-Motos, ¿cómo y dónde cargas el script?

    deberías tener en el head la carga de la librería jquery

    <head>
      <script src="path-jquery" />
    </head>

    después en el body tendrás tu enlace  y despúes del enlace, antes de finalizar el body tu <script>

    <a href="#" class="back-to-top">Subir</a>
    
    <script type="text/javascript">        
            var amountScrolled = 300;
            $(window).scroll(function () {
                if ($(window).scrollTop() > amountScrolled) {
                    $('a.back-to-top').fadeIn('slow');
                } else {
                    $('a.back-to-top').fadeOut('slow');
                }
            });
            $('a.back-to-top, a.simple-back-to-top').click(function () {                        
                    $('html, body').animate({ scroll
                    return false;
                });
        </script>
    
    </body>


    Si no es así y tu script lo cargas antes del enlace deberás cargar el script cuando todo el DOM se haya cargado:

            <script type="text/javascript">
                $(function () {
                    var amountScrolled = 300;
                    $(window).scroll(function () {
                        if ($(window).scrollTop() > amountScrolled) {
                            $('a.back-to-top').fadeIn('slow');
                        } else {
                            $('a.back-to-top').fadeOut('slow');
                        }
                    });
                    $('a.back-to-top, a.simple-back-to-top').click(function () {
                        $('html, body').animate({ scrollTop: 0 }, 1200);
                        return false;
                    });
                });
             </script>

    Es importante el orden, en el que se cargan las librerías funciones. Tu código está bien, el problema es la manera en el que estás cargando librería/funciones.

    Un saludo ya me cuentas.



    • Editado dudasc miércoles, 14 de diciembre de 2016 9:15 rectificar frase
    • Marcado como respuesta Daniel-Motos miércoles, 14 de diciembre de 2016 15:26
    miércoles, 14 de diciembre de 2016 9:13

Todas las respuestas


  • ¿Este es el código del que te estás sirviendo para realizar el ejemplo?

    http://html-tuts.com/back-to-top-button-jquery/

    Ahí está disponible el código para descargar, mira a ver si tienes todo correcto.


    viernes, 9 de diciembre de 2016 11:22
  • Sí, ese es el código.

    He tenido que adaptarlo a una página asp.net, ya que el ejemplo es sobre una página html.

    Cuando hago click sobre el botón, se posiciona arriba de la página, es decir, el scrollTop:0 lo realiza, pero no con efecto. Sube de inmediato.


    viernes, 9 de diciembre de 2016 17:10
  • Buenas Daniel-Motos

    He probado tu código en local también en página maestra, llamando al código desde el footer de dicha página como de una página hija y funciona correctamente, ¿has revisado si la consola del navegador si te lanza algún tipo de error?

    Un saludo.
    martes, 13 de diciembre de 2016 7:42
  • No me lanza ningún error.

    Podrías adjuntarme un proyecto de ejemplo en asp.net.

    Te estaría muy agradecido.

    Gracias.

    martes, 13 de diciembre de 2016 17:47
  • Buenas Daniel-Motos, ¿cómo y dónde cargas el script?

    deberías tener en el head la carga de la librería jquery

    <head>
      <script src="path-jquery" />
    </head>

    después en el body tendrás tu enlace  y despúes del enlace, antes de finalizar el body tu <script>

    <a href="#" class="back-to-top">Subir</a>
    
    <script type="text/javascript">        
            var amountScrolled = 300;
            $(window).scroll(function () {
                if ($(window).scrollTop() > amountScrolled) {
                    $('a.back-to-top').fadeIn('slow');
                } else {
                    $('a.back-to-top').fadeOut('slow');
                }
            });
            $('a.back-to-top, a.simple-back-to-top').click(function () {                        
                    $('html, body').animate({ scroll
                    return false;
                });
        </script>
    
    </body>


    Si no es así y tu script lo cargas antes del enlace deberás cargar el script cuando todo el DOM se haya cargado:

            <script type="text/javascript">
                $(function () {
                    var amountScrolled = 300;
                    $(window).scroll(function () {
                        if ($(window).scrollTop() > amountScrolled) {
                            $('a.back-to-top').fadeIn('slow');
                        } else {
                            $('a.back-to-top').fadeOut('slow');
                        }
                    });
                    $('a.back-to-top, a.simple-back-to-top').click(function () {
                        $('html, body').animate({ scrollTop: 0 }, 1200);
                        return false;
                    });
                });
             </script>

    Es importante el orden, en el que se cargan las librerías funciones. Tu código está bien, el problema es la manera en el que estás cargando librería/funciones.

    Un saludo ya me cuentas.



    • Editado dudasc miércoles, 14 de diciembre de 2016 9:15 rectificar frase
    • Marcado como respuesta Daniel-Motos miércoles, 14 de diciembre de 2016 15:26
    miércoles, 14 de diciembre de 2016 9:13
  • Te estoy muy agradecido. Funciona perfectamente.

    El fallo estaba en el script. No lo empezaba con $(function() {...... });

    Muchas gracias.

    miércoles, 14 de diciembre de 2016 15:29