Форум

Equality · #1 (**permalink**) 30.10.2013, 23:40

Доброе время суток! Увидел на одном сайте красивый скролинг от одного, наверное, блока к другому (Не сочтите за рекламу, увидел здесь)

Попытался реализовать свою грубую, корявую версию:

function heigth_inc()
 {
 var container = document.getElementById('container');
 var container_second = document.getElementById('container_second');
 container.style.height = document.body.clientHeight - 18 +'px';
 container_second.style.height = document.body.clientHeight - 18 +'px';
 }
 
 var i_scroll = 0;
 var pause = 2;
 var step = 2;
 var scrollheight = document.body.clientHeight;
	function scrollwindow() {
		window.scroll(0,i_scroll)
		i_scroll+= step;
		if (i_scroll >= scrollheight){
			return;
		}
		var timer = setTimeout("scrollwindow()",pause)
	}
	window.onload=scrollwindow;
</script>

<body onload='heigth_inc()' style='background-color: #000000;'>
<div id="container" style="border: 1px solid #000; background-color: #000000; color: #FFFFFF; width: 100%;">
test
<br>
<button onclick="scrollwindow()">Скроллинг</button>
</div>

<div id="container_second" style="border: 1px solid #000; background-color: #FFFFFF; color: #000000; width: 100%;">
test2
</div>

</body>

Естественно, вышло коряво

Сам я новичок в этом. В общем, был бы крайне благодарен за подсказки\помощь в реализации подобного скролинга или может кто-то встречал уже готовые реализации такого...

Еще, возможно не совсем по теме, но хотелось бы узнать подробней о таком разбиении страницы на 2 блока а-ля 2 странички отдельные. Изначально, я подумал, что это 2 div блока, собственно так и пытался писать. Пробовал искать в поисковике подобное, но так и не нашёл, возможно формулирую не верные запросы

jsru_ · #2 (**permalink**) 30.10.2013, 23:51

если scrollTop ниже высоты первого элемента то scrollTo ко второму и наоборот

Equality · #3 (**permalink**) 01.11.2013, 23:33

Сообщение от jsru_

если scrollTop ниже высоты первого элемента то scrollTo ко второму и наоборот

Спасибо

Equality · #4 (**permalink**) 03.11.2013, 05:50

Возник вопрос:

Пытаюсь сделать, как написали выше, применяя 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>

Форум

Справочник

Discord чат

Курсы javascript