خودتان امتحان کنید

<!DOCTYPE html>
<html lang="fa">
<head>
	<title>پروژه محور- بیاموز</title>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">         
	<meta name="viewport" content="width=device-width, initial-scale=1.0">         
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<script src="jquery.min.js"></script> 
	<style>
	body
	{
		float:right;
		direction:rtl;
		width:99%;
	}
	.menu
	{
		width:100%;
		height:50px;
		position:relative;
		background-color:#000;
		color:#fff;
	}
	ul
	{
		width:80%;
		list-style-type:none;
		margin:auto;
		padding:10px;
		text-align:center;
	}
	li
	{
		display:inline;
		margin:30px;
		padding:10px;
	}

a
	{
		text-decoration:none;
		color:#fff;
		width:250px;
		font-size:16px;
		text-align:center;
		padding:4px;
	}

.section
	{
		width:100%;
		height:500px;
		margin:0px;
	}

#section1
	{
		background-color:yellow;
	}

#section2
	{
		background-color:green;
	}

#section3
	{
		background-color:blue;
	}

#section4
	{
		background-color:red;
	}
	.f-nav
	{
		position:fixed;
		top:0px;
		left:0px;
		z-index:10000;
		width:100%;
	}
	</style>
	<script>
	  $(document).ready(function(e) {
		
		$(window).scroll(function(e) {
			
			if($(this).scrollTop() >100)
			{
				$('.menu').addClass('f-nav');
			}
			else
			{
				$('.menu').removeClass('f-nav');
			}
		});

// Add smooth scrolling to all links
	  $("a").on('click', function(event) {

// Make sure this.hash has a value before overriding default behavior
		if (this.hash !== "") {
		  // Prevent default anchor click behavior
		  event.preventDefault();

// Store hash
		  var hash = this.hash;

// Using jQuery's animate() method to add smooth page scroll
		  // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
		  $(' body').animate({
			scrollTop: $(hash).offset().top
		  }, 800, function(){
	   
			window.location.hash = hash;
		  });
		} // End if
	  });
	});

</script>               
</head>
<body>
	<section class="menu">          
	  <ul>
	   <li><a href="#section1" class="page-scroll">خانه</a></li>   
	   <li><a href="#section2" class="page-scroll">درباره ما</a></li>
	   <li><a href="#section3" class="page-scroll">ارتباط با ما</a></li>
	   <li><a href="#section4" class="page-scroll">محصولات</a></li>          
	  </ul>       
	</section>              
	<section class="section" id="section1">section1</section>
	<section class="section" id="section2">section2</section>
	<section class="section" id="section3">section3</section>
	<section class="section" id="section4">section4</section>
</body>
</html>

Report a Problem: