I am updating my website in the most current changes guiding me in the changes and replacing $(function() {});
by $(document).ready(function()
but my menu scroll does not work the animation in the version 3.3.1
of jQuery
the current animation or my code works with the version2.1.3
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
$(function() {
$('a[href*=#]').bind('click', function(e) {
e.preventDefault(); // prevent hard jump, the default behavior
var target = $(this).attr("href"); // Set the target as variable
// perform animated scrolling by getting top-position of target-element and set it as scroll target
$('html, body').stop().animate({
scrollTop: $(target).offset().top
}, 600, function() {
location.hash = target; //attach the hash (#jumptarget) to the pageurl
});
return false;
});
});
$(window).scroll(function() {
var scrollDistance = $(window).scrollTop();
// Show/hide menu on scroll
//if (scrollDistance >= 850) {
// $('nav').fadeIn("fast");
//} else {
// $('nav').fadeOut("fast");
//}
// Assign active class to nav links while scolling
$('.page-section').each(function(i) {
if ($(this).position().top <= scrollDistance) {
$('.navigation a.active').removeClass('active');
$('.navigation a').eq(i).addClass('active');
}
});
}).scroll();
* {
font-family: 'Lato', sans-serif;
font-weight: 300;
transition: all .1s ease;
}
html, body {
height: 100%;
}
h1 {
font-size: 64px;
}
.page-section {
height: 480px;
width: 50%;
margin-left: 35%;
margin-top: 5%;
padding: 3em;
background: linear-gradient(45deg, #43cea2 10%, #185a9d 90%);
color: white;
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5);
}
.navigation {
position: fixed;
width: 30%;
margin-left: 2%;
background-color: #999;
color: #fff;
}
.navigation__link {
display: block;
color: #ddd;
text-decoration: none;
padding: 1em;
font-weight: 400;
}
.navigation__link:hover {
background-color: #aaa;
}
.navigation__link.active {
color: white;
background-color: rgba(0, 0, 0, 0.1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Lato:100,400,700' rel='stylesheet' type='text/css'>
<nav class="navigation" id="mainNav">
<a class="navigation__link" href="#aaa">Section 1</a>
<a class="navigation__link" href="#bbb">Section 2</a>
<a class="navigation__link" href="#ccc">Section 3</a>
<a class="navigation__link" href="#ddd">Section 4</a>
<a class="navigation__link" href="#eee">Section 5</a>
<a class="navigation__link" href="#fff">Section 6</a>
<a class="navigation__link" href="#7">Section 7</a>
</nav>
<div class="page-section hero" id="1">
<h1>Smooth scroll, fixed jump menu with active class</h1>
</div>
<div class="page-section" id="aaa">
<h1>Section Two</h1>
</div>
<div class="page-section" id="bbb">
<h1>Section Three</h1>
</div>
<div class="page-section" id="ccc">
<h1>Section Four</h1>
</div>
<div class="page-section" id="ddd">
<h1>Section Five</h1>
</div>
<div class="page-section" id="eee">
<h1>Section Six</h1>
</div>
<div class="page-section" id="fff">
<h1>Section Seven</h1>
</div>
What changes should I consider, a bit confusing normally I use very simple and small things on jQuery I don't deepen its use.?
I solved your problem and what I got was that the selector of this line is incorrectly declared (it is not a problem of the JQuery version ):
I've changed it to this one:
As for expressions to declare selectors + attributes + values , here is a link to a page that explains how to do it;
https://www.w3schools.com/jquery/jquery_ref_selectors.asp
Now executing that the design is very nice, I see that when selecting an item from the menu it moves one more block than the corresponding one, that is, I press the Section 2 item and it shows Section Three, it seems that the code is made to do that behavior.
You can also help yourself: Using the F12 key in the Navigator you can see the execution of the code and in this way you can analyze reports of the operation and future failures in the page.