Foros del Web » Programando para Internet » Jquery »

Subir arriba animado

Estas en el tema de Subir arriba animado en el foro de Jquery en Foros del Web. Buenos días, estoy intentando colocar en mi web desarrollada con bootstrap un botón que cuando se haga click encima de él , vaya al top ...
  #1 (permalink)  
Antiguo 21/01/2013, 04:58
 
Fecha de Ingreso: marzo-2012
Mensajes: 77
Antigüedad: 12 años
Puntos: 0
Pregunta Subir arriba animado

Buenos días, estoy intentando colocar en mi web desarrollada con bootstrap un botón que cuando se haga click encima de él , vaya al top de la web. Me he informado de como hacerlo, lo tengo todo igual que en los tutoriales que he visto, pero no consigo que funcione la animacion con Jquery.
Así es como tengo llamados a los archivos javascript y a la clase que hace el efecto en jquery:
Código Javascript:
Ver original
  1. <script src="js/jquery.js"></script>
  2.     <script src="js/bootstrap-transition.js"></script>
  3.     <script src="js/bootstrap-alert.js"></script>
  4.     <script src="js/bootstrap-modal.js"></script>
  5.     <script src="js/bootstrap-dropdown.js"></script>
  6.     <script src="js/bootstrap-scrollspy.js"></script>
  7.     <script src="js/bootstrap-tab.js"></script>
  8.     <script src="js/bootstrap-tooltip.js"></script>
  9.     <script src="js/bootstrap-popover.js"></script>
  10.     <script src="js/bootstrap-button.js"></script>
  11.     <script src="js/bootstrap-collapse.js"></script>
  12.     <script src="js/bootstrap-typeahead.js"></script>
  13. <script type="text/javascript">
  14.     $(document).ready(function() {
  15.  
  16. $(“a.topLink).click(function() {
  17. $(“html, body”).animate({
  18. scrollTop: $($(this).attr(“href”)).offset().top + “px”
  19. }, {
  20. duration: 500,
  21. easing: “swing”
  22. });
  23. return false;
  24. });
  25.  
  26. });
  27. </script>

Y así es como tengo puesto el botón:

Código HTML:
Ver original
  1. <p class="pull-right"><a href="#anchor" class="topLink"">Subir arriba</a></p>

Aquí la web:

http://inmobiliaria.xtrweb.com/exper...s/portada.html

Gracias y espero que me podáis echar una mano.
Un saludo.
  #2 (permalink)  
Antiguo 21/01/2013, 05:57
Avatar de fishdesign  
Fecha de Ingreso: abril-2011
Ubicación: Málaga
Mensajes: 389
Antigüedad: 13 años
Puntos: 95
Respuesta: Subir arriba animado

Es más sencillo que todo eso:

Código Javascript:
Ver original
  1. $('#up').on('click', function() {
  2.         $('html, body').animate({ scrollTop: 0 }, 'medium');
  3. });
__________________
Web Designer.
Themes-Up!, próximamente
  #3 (permalink)  
Antiguo 21/01/2013, 06:39
Avatar de NUCKLEAR
Moderador radioactivo
 
Fecha de Ingreso: octubre-2005
Ubicación: Cordoba-Argentina
Mensajes: 5.688
Antigüedad: 18 años, 5 meses
Puntos: 890
Cita:
Iniciado por manuxdjent Ver Mensaje
Buenos días, estoy intentando colocar en mi web desarrollada con bootstrap un botón que cuando se haga click encima de él , vaya al top de la web. Me he informado de como hacerlo, lo tengo todo igual que en los tutoriales que he visto, pero no consigo que funcione la animacion con Jquery.
Así es como tengo llamados a los archivos javascript y a la clase que hace el efecto en jquery:
Código Javascript:
Ver original
  1. <script src="js/jquery.js"></script>
  2.     <script src="js/bootstrap-transition.js"></script>
  3.     <script src="js/bootstrap-alert.js"></script>
  4.     <script src="js/bootstrap-modal.js"></script>
  5.     <script src="js/bootstrap-dropdown.js"></script>
  6.     <script src="js/bootstrap-scrollspy.js"></script>
  7.     <script src="js/bootstrap-tab.js"></script>
  8.     <script src="js/bootstrap-tooltip.js"></script>
  9.     <script src="js/bootstrap-popover.js"></script>
  10.     <script src="js/bootstrap-button.js"></script>
  11.     <script src="js/bootstrap-collapse.js"></script>
  12.     <script src="js/bootstrap-typeahead.js"></script>
  13. <script type="text/javascript">
  14.     $(document).ready(function() {
  15.  
  16. $(“a.topLink).click(function() {
  17. $(“html, body”).animate({
  18. scrollTop: $($(this).attr(“href”)).offset().top + “px”
  19. }, {
  20. duration: 500,
  21. easing: “swing”
  22. });
  23. return false;
  24. });
  25.  
  26. });
  27. </script>

Y así es como tengo puesto el botón:

Código HTML:
Ver original
  1. <p class="pull-right"><a href="#anchor" class="topLink"">Subir arriba</a></p>

Aquí la web:

http://inmobiliaria.xtrweb.com/exper...s/portada.html

Gracias y espero que me podáis echar una mano.
Un saludo.

Tenés un error en las comillas(tenes “ cuando deberia ser "), a veces no solo es copiar y pegar, si no fijarse que se está haciendo....
__________________
Drupal Argentina
  #4 (permalink)  
Antiguo 21/01/2013, 06:58
 
Fecha de Ingreso: marzo-2012
Mensajes: 77
Antigüedad: 12 años
Puntos: 0
Respuesta: Subir arriba animado

Cita:
Iniciado por NUCKLEAR Ver Mensaje
Tenés un error en las comillas(tenes “ cuando deberia ser "), a veces no solo es copiar y pegar, si no fijarse que se está haciendo....
Ése era el motivo por el cual no funcionaba, gracias por avisarme, seguro que no me pasa más veces xD.

Etiquetas: arriba
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:24.