Hello reader's,
Below is the example for Simple Parallax Effect with smooth scrolling Jquery
If you having trouble with such issues, the use the below code.

Here is the HTML of Scroll trigger

<div class="carousel-indicators">
        <a href="#home" title="Home"><img src="http://www.kidzjet.com/wp-content/themes/kidzetnew/images/home.png"></a>
        <a href="#video" title="What is KidzJet?"></a>
        <a href="#Why-us" title="Why us?"></a>
        <a href="#KID" title="Kids Transportation"></a>
        <a href="#institutions" title="Institution"></a>
        <a href="#Parent" title="Parent Groups"></a>
        <a href="#adve" title="KidzJet Adventures"></a>
        <a href="#bottom" title="Footer"><img src="http://www.kidzjet.com/wp-content/themes/kidzetnew/images/file-sharing.png"></a>
    </div>

Here is the HTML of Parallax background

<div id="institutions">
    <div id="tosca">
       <div class="section section-image extra-padding more-text-block">
        <div style="background-image: url(&quot;http://www.kidzjet.com/wp-content/themes/kidzetnew/images/institutions.png&quot;); background-position: 50% 33px;" class="bg-row">
        </div>
      </div>
    </div>
</div>

Here is the CSS

.bg-row {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.section-image.extra-padding {
    padding-top: 350px;
}
.no-touch .section-image .bg-row {
    background-attachment: fixed;
}
.section-image {
    padding-top: 180px;
}
.section {
    padding: 30px 0;
    position: relative;
}
.more-text-block {
    color: #fff;
    overflow: hidden;
}

Here is the Js

Scroll trigger

   $('a[href*="#"]').click(function(e) {
      var $href = $(this).attr('href');
      if ( $href !== '#' ) {
        var $id = $href.split('#').pop();
        var $el = $('#' + $id);
        if ( $el.length > 0 ) {
          e.preventDefault();
          animateOffset( $el, 500, 'linear' );
        }
      }
    });

Here is the Parallax Background Code

Parallax background

 if ( !isMobile ) {
    var $window             = $(window),
    e                   = 'scroll orientationchange resize',
    paralaxElements     = $('.section-image').find('.bg-row'),
    scrollTop           = $window.scrollTop(),
    windowHeight        = $window.height(),
    parallaxing         = function(){
      var $this = $(this),
        elementPosition = $this.offset().top,
        elementHeight = $this.outerHeight();

      if ( elementPosition + elementHeight < scrollTop || scrollTop + windowHeight < elementPosition ) {return;}
      $this.css('background-position', '50% ' + Math.floor(elementPosition - scrollTop)*0.25 + 'px');
    },

    initParalax = function(){
      paralaxElements.each(parallaxing);
    };

    initParalax();
    $window.on(e, function(){
      scrollTop = $window.scrollTop();
      initParalax();
    });
  }
})();