Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   скролл до нужного элемента страницы (https://javascript.ru/forum/events/31749-skroll-do-nuzhnogo-ehlementa-stranicy.html)

khramy 19.09.2012 16:29

скролл до нужного элемента страницы
 
Здравствуйте! Помогите, почему не работает скрипт:
$(document).ready(function() {
            $('div.center_block, li').stop().animate({scrollLeft: 0, scrollTop:$('#p4').offset().top}, 1000);
            $('#p4').css('backgroundColor','#ffffff');
            $('#p4').css('color','#000000');
      });

И самое интересное,что проверял скрипт, все работает, вставляю в сайт не работает.
Вот тестовая страница
<!DOCTYPE html> 
<html>
<head>
	<html lang="ru">
	<meta charset="windows-1251">
	<title>dgdgdgdg</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
[JS]/*<![CDATA[*/
      $(document).ready(function() {
            $('div.block, li').stop().animate({scrollLeft: 0, scrollTop:$('#p4').offset().top}, 1000);
            $('#p4').css('backgroundColor','#ffffff');
            $('#p4').css('color','#000000');
           
      });
/*]]>*/[/JS]
</script>
</head>
<body>
	<style type="text/css">
.block {
	position: fixed;
	width: 250px;
	height: 150px;
	overflow: auto;
	background-color: yellow;
	overflow-x: hidden;
}


#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9 {
	width: 230px;
	padding: 10px;
	margin-top: 3px;
	background-color: red;
} 

li {
	margin-left:0px;
	list-style: none;
}
</style>
<div class="block">
	
	<li><a href="#"><div id="p1" class="punkt_block">Мои блоки1</div></a></li>
	<li><a href="#"><div id="p2" class="punkt_block">Мои блоки2</div></a></li>
	<li><a href="#"><div id="p3" class="punkt_block">Мои бло<br>вмвмивки3</div></a></li>
	<li><a href="#"><div id="p4" class="punkt_block">Мои блвмв<br><br>мивмиоки4</div></a></li>
	<li><a href="#"><div id="p5" class="punkt_block">Мои блоки5</div></a></li>
	<li><a href="#"><div id="p6" class="punkt_block">Мои блоквисрвсмрвпмси6</div></a></li>
	<li><a href="#"><div id="p7" class="punkt_block">Мои блоки7</div></a></li>
	<li><a href="#"><div id="p8" class="punkt_block">Мои блоки8</div></a></li>
	<li><a href="#"><div id="p9" class="punkt_block">Мои блоки9</div></a></li>
	
</div>

</body>
</html>


Вот кусок кода, к которому я применяю эффект на сайте:
<div class="block">
                <div class="verh_block"></div>
                <div class="center_block">
                    <script src="./files/block_index_sand.js" type="text/javascript"></script>(в скрипте функция document.write)
                    </div>
                <div class="bottom_block"></div>
            </div>

Gozar 19.09.2012 22:06

1. Это раздел, где выкладывают рабочие скрипты.

На форуме есть раздел: http://javascript.ru/forum/jquery/, который специально создан для того, чтобы вы там задали свой вопрос.

2. Второе никто не будет собирать страницу, чтобы тестировать ваш скрипт. Если хотите, чтобы кто-нибудь его посмотрел, выложите его так, чтобы можно было перейти на тестовую страницу по ссылке!


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