// Select all links with hashes $('a[href*="#"]') // Remove links that don't actually link to anything .not('[href="#"]') .not('[href="#0"]') .not('[href="#multi-item-example"]') .not('[href="#carouselExampleControls"]') .not('[href="#multi-item-example2"]') .not('[href="#carouselId"]') .click(function(event) { // On-page links if ( location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname ) { // Figure out element to scroll to var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); // Does a scroll target exist? if (target.length) { // Only prevent default if animation is actually gonna happen event.preventDefault(); $('html, body').animate({ scrollTop: target.offset().top }, 1000, function() { // Callback after animation // Must change focus! var $target = $(target); $target.focus(); if ($target.is(":focus")) { // Checking if the target was focused return false; } else { $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable $target.focus(); // Set focus again }; }); } } }); $('.img-parallax').each(function(){ var img = $(this); var imgParent = $(this).parent(); function parallaxImg () { var speed = img.data('speed'); var imgY = imgParent.offset().top; var winY = $(this).scrollTop(); var winH = $(this).height(); var parentH = imgParent.innerHeight(); // The next pixel to show on screen var winBottom = winY + winH; // If block is shown on screen if (winBottom > imgY && winY < imgY + parentH) { // Number of pixels shown after block appear var imgBottom = ((winBottom - imgY) * speed); // Max number of pixels until block disappear var imgTop = winH + parentH; // Porcentage between start showing until disappearing var imgPercent = ((imgBottom / imgTop) * 100) + (50 - (speed * 50)); } img.css({ top: +(imgPercent/1) + '%', transform: 'translate(0%, -' + imgPercent + '%)', }); } $(document).on({ scroll: function () { parallaxImg(); }, ready: function () { parallaxImg(); } }); });