jQuery Functions Overwriting Each Other

Question

I have these 3 functions and I think the smooth scroll ones are overwriting the image blur function or something but I don't know what the issue is. If I comment out the smooth scroll functions the image background blur function works.

Below are the jQuery functions, does anyone have any solutions?

//////////////////////// Smooth Scroll To Specific Element On Page ////////////////////////
$(document).ready(function($) {
    $('a[href^="#"]').not('.nav-link').bind('click.smoothscroll', function(e) {
        e.preventDefault();

        var hash = this.hash;

        jQuery('html, body').animate({
            scrollTop: jQuery(hash).offset().top - 60
        }, 1500, function(){});
    });
});

//////////////////////// Smooth Scroll To Specific Element On Different Page ////////////////////////

$(document).ready(function(){
    var urlHash = window.location.href.split("#")[1];
    if (urlHash.length > 0)
        $('html,body').animate({
            scrollTop: $('#' + urlHash).offset().top - 60
        }, 2500);
});

//////////////////////// Background Image Blur ////////////////////////

$(document).ready(function() {
    $(window).scroll(function(e) {
        var s = $(window).scrollTop(),
        opacityVal = (s / 1000);

        $('.blurred-image').css('opacity', opacityVal);
    });
});

If I'm not mistaken `.bind()` is very old and deprecated in newer versions of jQuery. Use `.on()` for future-proof code. — Jhecht, Oct 26 '18 at 23:39

showdev · Accepted Answer · 2018-10-26T23:48:02.653

The only issue I see is with these two lines:

var urlHash = window.location.href.split("#")[1];
if (urlHash.length > 0)

When there is no hash, urlHash is undefined and checking its length throws an error:

Uncaught TypeError: Cannot read property 'length' of undefined

That causes the rest of the code to not be executed.
I've handled it like this:

var urlHash = window.location.href.split("#")[1] || false;

Other than that, you don't need multiple document.ready functions.
It won't break your code, it's just not necessary.

$(function() {

  // Smooth Scroll To Specific Element On Page

  $('a[href^="#"]').not('.nav-link').on('click', function(e) {

    e.preventDefault();

    var hash = this.hash;

    $('html, body').animate({
      scrollTop: $(hash).offset().top - 60
    }, 1500, function() {});

  });


  // Smooth Scroll To Specific Element On Different Page

  var urlHash = window.location.href.split("#")[1] || false;

  if (urlHash.length > 0) {
    $('html,body').animate({
      scrollTop: $('#' + urlHash).offset().top - 60
    }, 2500);
  }


  // Background Image Blur

  $(window).scroll(function(e) {

    var s = $(window).scrollTop();
    var opacityVal = (s / 1000);

    $('.blurred-image').css('opacity', opacityVal);

  });

});

img {
  display: block;
  margin: 1em 0;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#stuff">Scroll To Stuff</a>

<img src="https://picsum.photos/200/300?image=0" alt="" class="blurred-image">
<img src="https://picsum.photos/200/300?image=10" alt="" class="blurred-image">
<img src="https://picsum.photos/200/300?image=20" alt="" class="blurred-image">
<img src="https://picsum.photos/200/300?image=30" alt="" class="blurred-image">
<img src="https://picsum.photos/200/300?image=40" alt="" class="blurred-image">

<div id="stuff">
  STUFF
</div>

Thank you so much for the explanation and code, this works wonderfully! — Jo White, Oct 27 '18 at 06:06

jQuery Functions Overwriting Each Other

1 Answers1