How to optimize JS block scrolling, CSS3?

Question

css

I am making a website with scrolling of individual blocks of information. Blocks stretch to full screen, some have a 1920x1080px image in the background. They scroll through the code:

$(document).ready(function(){
  
  jQuery.easing.def = "easeInOutQuad";
  
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
   e.preventDefault();

  var target = this.hash,
   $target = $(target);

  $('html, body').stop().animate({'scrollTop': $target.offset().top
     }, 1000, "swing", function () {window.location.hash = target;});
   });

});

With the jQuery easing plugin included.

The problem is that scrolling on a laptop monitor is smooth, but when displayed on a 1920x1080 monitor, the block with the background image lags and the animation is jerky. In addition, a pair of transitions in css is used, but I removed them and this did not affect the scrolling in any way.

How to write a script correctly or place an image / lay out blocks so that these lags do not exist?

Block CSS Code

.content {height: 100%;}
.content section {width: 100%; height: 100%;}

#main {
  background: url('../images/main_bg.jpg');
  background-size: cover;
  background-position: center;
}

HTML Code

<div class="content">
        
<section id="main">
 </section>
        
 <section id="bio">
 </section>
        
<section id="events">
</section>

</div>

Answer 1

Try using the jquery plugin Transit . It uses css3 animation, which in its own way gives smoothness and less lag. After all, css3 is not as CPU intensive as js. But of course, if it doesn’t help too much, then this is due to the large size of the picture. But I think it should help if you correctly use and rewrite the animation with this plugin.