??? ?? ??? ????

??? ???? ??? ??? ?? ??? ????, CSS? jQuery? ???? ??? ? ????. ?? ???? ?? ??? ?? ??? ?? ??? ??? ?????.

1. ???? ?? ???? ?? ??? ?????. ?? ??.


2. ???? ?? ?? ? ????? ??? ???? ???? ??? ???.


3. jQuery? ???? ?? ????? ?????? ?????. ?? ??? ???? ?? ????? ????? ?? ??? ?????.

? ???? ??? ?? ? ?? ??? ?????.

1. ??? ??? ????? ?? ?? ?? ????? ??? ?????.


2. ??? ?? jQuery? ?????. ???.


3. ? ??? ???? ?? ???? ????? ?? ???? ???.

< p>??? ?? ????? ??? ??? ???? ??? ??? CSS?? ???? ?? ??? ?????.

<code class="css">.page { min-height: 100%; }</code>

$(document).ready(function() {
// Calculate the number of slides and adjust wrapper width
var slideNum = $('.page').length;
var wrapperWidth = 100 * slideNum;
var slideWidth = 100 / slideNum;
$('.wrapper').width(wrapperWidth + '%');
$('.page').width(slideWidth + '%');

// Click listener for navigation items
$('a.scrollitem').click(function() {
// Remove selected class and add it to the clicked link
$('a.scrollitem').removeClass('selected');
$(this).addClass('selected');

//Determine which slide number was clicked and calculate the required margin
var slideNumber = $($this).attr('href').index('.page'),
margin = slideNumber * -100 + '%';

// Animatethe wrapper's left margin to show corresponding slide
$('.wrapper.animate({
marginLeft: margin},
1000);
return false;
});
});

<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<nav>
<a href="#page-1" class="scrollitem selected">Page 1</a>
<a href="#page-2" class="scrollitem">Page 2</a>
<a href="#page-3" class="scrollitem">Page 3</a>
</nav>
<div id="page-1" class="page">
<h3>Page 1</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
<div id="page-2" class="page">
<h3>Page 2</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
<div id="page-3" class="page">
<h3>Page 3</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
</div></code>

? ??? jQuery? CSS? ???? ??? ?? ??? ???? ??? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!