I am learning jQuery and trying to work my way around a scroll effect. Anyway, I am trying to make this code work but having trouble in doing so. It breaks when It runs the animate function:
I would really appreciate your help on this one. Thank you.
Uncaught TypeError: $(...).animate is not a function
at HTMLAnchorElement. (script.js:58)
at HTMLDocument.dispatch (jquery-3.1.1.slim.min.js:3)
at 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>It's because of the jQuery version you use. https://code.jquery.com/jquery-3.1.1.slim.min.js
slim version of jQuery does not contain all the original jQuery functions.
You should use a full version. You can download it from here.
It will help to better understand if you read this article from here where at some point in it you will find this statement and I quote:
Slim build
Finally, we’ve added something new to this release. Sometimes you don’t need ajax, or you prefer to use one of the many standalone libraries that focus on ajax requests. And often it is simpler to use a combination of CSS and class manipulation for all your web animations. Along with the regular version of jQuery that includes the ajax and effects modules, we’re releasing a “slim” version that excludes these modules. All in all, it excludes ajax, effects, and currently deprecated code.
slim version will not support some methods hence include this CDN
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
in your project and then run your code it will work.
It work for me ---->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
Example:
<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>