title: can smooth scroll to a component cause other components to blur in jquery/css?
body: <p>I'm using the solution proposed here <a href="https://stackoverflow.com/questions/10889983/jquery-scrollto-center-div-in-window-vertically">jQuery scrollTo - Center Div in Window Vertically</a> and it works, when I hit some link on my webpage, I immediately see smooth scrolling that stops when my  header is in the middle of the screen. However, I have several other components above and below, so I thought about bluring them until the user scrolls up or down - is that even possible in jquery or css?</p>
  
  <p>I prepared small <a href="https://jsfiddle.net/ea67uqd6/1/" rel="nofollow noreferrer">jsfiddle</a> with the code so far, I just have trouble with attaching jquery library itself, so the smooth scroll might now be visible there... But all in all I'm using the following script:</p>
  
  <pre><code>$('#borders a').on('click', function(e) { 
    var el = $( e.target.getAttribute('href') );
    var elOffset = el.offset().top;
    var elHeight = el.height();
    var windowHeight = $(window).height();
    var offset;
  
    if (elHeight &lt; windowHeight) {
      offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
    }
    else {
      offset = elOffset;
    }
  
    $.smoothScroll({ speed: 700 }, offset);
    return false;
  });
  </code></pre>
  
  <p>EDIT:: I marked this quesion as solved since the correct answer was given below, however it appeard to me later on that it doesn't work in my case. That's why I've decided to ask another question <a href="https://stackoverflow.com/questions/29678607/blurring-other-components-in-javascript-and-css-does-not-work-after-scrolling">here</a></p>