parallax scrolling jquery

Something Like that:
parallax scrolling jquery

For that you need to create first html code.

HTML

<ul class="gallery_menu">
  <li> <a href="#Home">Home</a></li>
  <li><a href="#About">About</a></li>
  <li><a href="#Cont1">Cont1</a></li>
  <li><a href="#Cont2">Cont2</a></li>
</ul>
<div class="portfolio-filter">
  <div id="Home">Home</div>
  <div id="About">About</div>
  <div id="Cont1">Cont1</div>
  <div id="Cont2">Cont2</div>
</div>

After that add this CSS code.

CSS

.gallery_menu {
  padding: 0;
  position: fixed;
}
.gallery_menu li {
  display: inline-block;
  background: #f5f5f5;
  border: 1px solid #ccc;
}
.gallery_menu li a {
  padding: 10px 15px;
  display: block;
  text-decoration: none;
  color: inherit;
}

.portfolio-filter div {
  width: 100%;
  height: 100vh;
  text-align: center;
  line-height: 200px;
  background: #f5f5f5;
  display: inline-block;
}
.portfolio-filter div:nth-child(2) {
  background: #ccc;
}
.portfolio-filter div:nth-child(3) {
  background: #0ff;
}
.portfolio-filter div:nth-child(4) {
  background: #ff0;
}

Use jQuery Library.

After that add this JQuery code.

JS

$('a[href^="#"]').on('click',function (e) {
	e.preventDefault();

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

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

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”RZYgLy” default_tab=”css,result” user=”pradeepanvi”]See the Pen parallax scrolling jquery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see