Плавный скролл к якорю после загрузки страницы
Всем доброго дня!
Я к сожалению в javascript ни в зуб ногой, но очень надо реализовать данную фичу. Честно читал уроки по ScrollTo, но везде указано как реализовать задачу только при нажатии на какую-нибудь кнопку. А мне надо чтобы скролл происходил сразу после загрузки страницы (а лучше с задержкой в пару секунд) Я это пытаюсь сделать таким образом - в <head> страницы прикручиваю: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery.scrollTo-min.js" type="text/javascript"></script> внутри <body> пытаюсь вызвать нужную фунцию
<script type="text/javascript"> jQuery(document).ready(function() {jQuery.scrollTo('#target-el');}); </script>
Ну и соответственно в некотором месте страницы присутствует элемент, к которому надо скролить <div id="target-el">Якорь</div> Просьба сильно ногами не бить, я в скриптах полный ноль, а изучать новый язык ради одной задачи, мягко говоря.... некогда :) |
pro100lexx87,
на просторах интернета найдите jquery 1 |
нашел два этих файла, положил в папку "scrollto", пути в шапке исправил
<head>
<script src="scrollto/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="scrollto/jquery.scrollTo-min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript"> jQuery(document).ready(function() {jQuery.scrollTo('#target-el');}); </script>
<div id="target-el">Якорь</div>
</body>
и все равно ничего не происходит при загрузке страницы :( |
pro100lexx87,
:cray:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3.1-min.js" type="text/javascript"></script>
<script type="text/javascript"> jQuery(document).ready(function() {jQuery.scrollTo('#target-el',2000);}); </script>
</head>
<body><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br>
<div id="target-el">Якорь</div>
</body>
</html>
|
Спасибо большое! Заработало) только что изменилось я не понял, наверно у меня файлы какие то кривые были...
А подскажите еще пожалуйста как задержку по времени перед скролом добавить? |
Цитата:
Цитата:
http://learn.javascript.ru/settimeou...val#settimeout |
Все таки пришлось немного вникнуть)) спасибо! задачка решена)
|
Задачка решена!!!))
http://vk.com/video10055987_167015242 написал!Прошла тест драйв под винду, линукс, осx и множество браузеров:write:
|
| Часовой пояс GMT +3, время: 20:05. |