Javascript-форум (https://javascript.ru/forum/)
-   Серверные языки и технологии (https://javascript.ru/forum/server/)
-   -   Проблема со скроллингом страницы! (https://javascript.ru/forum/server/46059-problema-so-skrollingom-stranicy.html)

Slavotyk 26.03.2014 12:51

Проблема со скроллингом страницы!
 
Создал сайт, в него пытался впилить слайдер-таб-меню.

Примерный код страницы:
<div id="scroller-header">
	<a href="#panel-1" rel="panel" class="selected">Главная</a><br>
	<a href="#panel-2" rel="panel">О Салоне</a><br>
	<a href="#panel-3" rel="panel">Бутик</a><br>
	<a href="#panel-4" rel="panel">Бар</a>
</div>
<div id="scroller-body">
	<div id="mask">
		<div id="panel">
			<div id="panel-1">
				Главная
                                
			</div>
			<div id="panel-2">
				О Салоне
                                
			</div>
			<div id="panel-3">
				Бутик
			</div>
			<div id="panel-4">
				Бар
			</div>	
		</div>
	</div>
</div>


Код js:
$(document).ready(function() {	

	//Get the height of the first item
	$('#mask').css({'height':$('#panel-1').height()});	
	
	//Calculate the total width - sum of all sub-panels width
	//Width is generated according to the width of #mask * total of sub-panels
	$('#panel').width(parseInt($('#mask').width() * $('#panel div').length));
	
	//Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
	$('#panel div').width($('#mask').width());
	
	//Get all the links with rel as panel
	$('a[rel=panel]').click(function () {
	
		//Get the height of the sub-panel
		var panelheight = $($(this).attr('href')).height();
		
		//Set class for the selected item
		$('a[rel=panel]').removeClass('selected');
		$(this).addClass('selected');
		
		//Resize the height
		$('#mask').animate({'height':panelheight},{queue:false, duration:500});			
		
		//Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
		$('#mask').scrollTo($(this).attr('href'), 800);	

  
		
	});
	
});


Ну и стили не столь важны.

ПРОБЛЕМА!
При нажании на кнопку меню слайдер работает и переключается, НО страничка сдвигается вниз. :С Не пойму как пофиксить.

рони 26.03.2014 13:23

Цитата:

Сообщение от Slavotyk
как пофиксить

понять что клик по ссылке и по якорю будет переход -- следовательно что ... ?

Slavotyk 26.03.2014 13:44

Цитата:

Сообщение от рони (Сообщение 304463)
понять что клик по ссылке и по якорю будет переход -- следовательно что ... ?

В теории нужно как то убирать якорь. Но сам плагин работает от якоря, или я ошибаюсь?

Slavotyk 26.03.2014 13:49

Я бы с радостью влепил бы в добавок "перемотку страницы вверх" но low skill не позволяет, не пойму как реализовать

рони 26.03.2014 14:01

Slavotyk,
а в строку 28 return false поставить?

Slavotyk 26.03.2014 14:02

не помогает

Slavotyk 26.03.2014 14:12

А может и вправду дело в стилях..
<style type="text/css">
#scroller-header a {
	text-decoration:none; 
	color:#867863; 
	padding:0 2px;
}

#scroller-header a:hover {
	text-decoration:none; 
	color:#4b412f
}

a.selected {
	text-decoration:underline !important; 
	color:#4b412f !important;
}

#scroller-header {
        float:left;
        border: black solid 2px;
	width:800px;;
	height:40px;
	padding:35px 0 0 15px;
	font-weight:700;
}

        #scroller-body {
        border: red solid 2px;
        float:left;
        width: 800px;
        height: 300px;
	padding-bottom:30px;

}

#mask {
        border: green solid 2px;
	width: auto;
	overflow:hidden;
	margin-top: 0px;
}

#panel {

}

#panel div {
float:left;

}


/* extra optional styling for each tab content */
#panel-1 {
}

#panel-2 {
}

#panel-3 {
}

</style>

рони 26.03.2014 14:33

Slavotyk,
делайте макет - иначе непонятно даже со стилями

Slavotyk 26.03.2014 14:37

Цитата:

Сообщение от рони (Сообщение 304477)
Slavotyk,
делайте макет - иначе непонятно даже со стилями

http://jsfiddle.net/Q98aT/

Slavotyk 26.03.2014 14:39

Даже вот так:
http://jsfiddle.net/Q98aT/#&togetherjs=tym5EE7C42


Часовой пояс GMT +3, время: 15:28.