Возник вопрос:
Пытаюсь сделать, как написали выше, применяя ScrollTop и ScrollTo, но не совсем получается из-за условия if. После того, как меня перекидывает в нужный мне блок, я не могу вернуться склором обратно к первому (верхнему) блоку, тк мешает условие, что если СкролТоп ниже, чем высота элемента...
Собственно, как тут надо правильно делать условие?
<html>
<head>
<title>Prototype</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script type='text/javascript' src='jquery.scrollTo-1.4.3.1.js'></script>
<script>
function heigth_inc(){
var container = document.getElementById('container');
var spacer = document.getElementById('spacer');
var container_second = document.getElementById('container_second');
//alert(document.body.clientHeight);
container.style.height = document.body.clientHeight +'px';
spacer.style.height = 600 +'px';
container_second.style.height = document.body.clientHeight +'px';
}
$(document).ready(function(){
//функция для доп эффекта
$.easing.elasout = function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};
$('a.one').click(function(){
var idscroll = $(this).attr('href');
$.scrollTo(idscroll, 1000, {easing:'elasout'});
return false;
});
$(window).scroll(function(){
//alert("Вы прокрутили содержимое данного окна.");
if ($(document).scrollTop() > container.offsetHeight){
var idscroll = document.getElementById('container_second');
$.scrollTo(idscroll, 1000, {easing:'elasout'});
//alert($(document).scrollTop() + ' ' + container.offsetHeight)
}
/*if ($(document).scrollTop() < container.offsetHeight){
var idscroll = document.getElementById('container');
$.scrollTo(idscroll, 1000, {easing:'elasout'});
//alert($(document).scrollTop() + ' ' + container.offsetHeight)
}*/
});
});
</script>
<style>
.nav ul {
padding-left: 0;
}
.nav ul li {
list-style: none;
}
.nav ul li a{
margin: 3px 0;
width: 100px;
background: #f3f3f3;
display: block;
padding: 5px 10px;
text-decoration: none;
color: #666;
}
.nav ul li a:hover{
background: #f7f7f7;
text-decoration: none;
color: #999;
}
</style>
</head>
<body onload='heigth_inc()' style='background-color: #000000;'>
<div class="nav" style="position:fixed; left: 20px; top: 10px;">
<h3>Пример</h3>
<ul>
<li><a class="one" href="#container">Верх</a></li>
<li><a class="one" href="#container_second">Низ</a></li>
</ul>
</div>
<div id="container" class='selector' style="border: 1px solid #000; background-color: #000000; color: #FFFFFF; width: 100%;">
test
<br>
</div>
<div id="spacer" style="border: 1px solid #000; background-color: #000000; color: #FFFFFF; width: 100%;">
spacer
<br>
</div>
<div id="container_second" style="border: 1px solid #000; background-color: #FFFFFF; color: #000000; width: 100%;">
test2
</div>
</body>
</html>