Estoy aprendiendo jQuery y tratando de solucionar un efecto de desplazamiento. De todos modos, estoy tratando de hacer que este código funcione, pero tengo problemas para hacerlo. Se rompe cuando ejecuta la función de animación:
Realmente agradecería su ayuda en este caso. Gracias.
TypeError no detectado: $(...).animate no es una función
en HTMLAnchorElement. (script.js:58)
en HTMLDocument.dispatch (jquery-3.1.1.slim.min.js:3)
en HTMLDocument.q.handle (jquery-3.1.1.slim.min.js:3)
// Select anchor tags to click on $(document).on("click", "a", function(event) { console.log("item clicked"); // Clear out the default action event.preventDefault(); console.log("working until now"); // Animate to selected selected target $("html,body").animate({ scroll: $($(this).attr('href')).offset().top }, 900); console.log("no errors for now"); }); <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <script src="javascript/script.js"> </script>Es por la versión de jQuery que usas. https://code.jquery.com/jquery-3.1.1.slim.min.js
La versión slim de jQuery no contiene todas las funciones originales de jQuery.
Debe utilizar una versión full . Puedes descargarlo desde aquí .
Ayudará a comprender mejor si lee este artículo desde aquí, donde en algún momento encontrará esta declaración y cito:
Complexión delgada
Finalmente, hemos agregado algo nuevo a esta versión. A veces no necesita ajax, o prefiere usar una de las muchas bibliotecas independientes que se enfocan en las solicitudes de ajax. Y, a menudo, es más sencillo usar una combinación de CSS y manipulación de clases para todas sus animaciones web. Junto con la versión regular de jQuery que incluye los módulos ajax y de efectos, estamos lanzando una versión "delgada" que excluye estos módulos. En general, excluye ajax, efectos y código obsoleto actualmente.
la versión delgada no admitirá algunos métodos, por lo tanto, incluya este CDN
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>en su proyecto y luego ejecute su código, funcionará.
It work for me ----> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>Ejemplo:
<html> <title>.....</title> <body> <!-------------------- scripts ---------------------------------> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <!- use this-> <script src="js/navbar-fixed.js"></script> </body> </html>