Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.01.2014, 13:08
Новичок на форуме
Отправить личное сообщение для pro100lexx87 Посмотреть профиль Найти все сообщения от pro100lexx87
 
Регистрация: 08.01.2014
Сообщений: 4

Плавный скролл к якорю после загрузки страницы
Всем доброго дня!

Я к сожалению в 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>

Просьба сильно ногами не бить, я в скриптах полный ноль, а изучать новый язык ради одной задачи, мягко говоря.... некогда
Ответить с цитированием
  #2 (permalink)  
Старый 08.01.2014, 13:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,080

pro100lexx87,
на просторах интернета найдите jquery 1 штука файл и jquery.scrollTo-min.js 1 файл итого 2 файла но не 3 остальное верно но можно добавить время скролинга duration
Ответить с цитированием
  #3 (permalink)  
Старый 08.01.2014, 14:20
Новичок на форуме
Отправить личное сообщение для pro100lexx87 Посмотреть профиль Найти все сообщения от pro100lexx87
 
Регистрация: 08.01.2014
Сообщений: 4

нашел два этих файла, положил в папку "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>

и все равно ничего не происходит при загрузке страницы
Ответить с цитированием
  #4 (permalink)  
Старый 08.01.2014, 14:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,080

pro100lexx87,

<!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>
Ответить с цитированием
  #5 (permalink)  
Старый 08.01.2014, 14:45
Новичок на форуме
Отправить личное сообщение для pro100lexx87 Посмотреть профиль Найти все сообщения от pro100lexx87
 
Регистрация: 08.01.2014
Сообщений: 4

Спасибо большое! Заработало) только что изменилось я не понял, наверно у меня файлы какие то кривые были...

А подскажите еще пожалуйста как задержку по времени перед скролом добавить?
Ответить с цитированием
  #6 (permalink)  
Старый 08.01.2014, 14:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,080

Сообщение от pro100lexx87
А подскажите еще пожалуйста как задержку по времени перед скролом добавить?
Сообщение от pro100lexx87
изучать новый язык ради одной задачи, мягко говоря.... некогда

http://learn.javascript.ru/settimeou...val#settimeout
Ответить с цитированием
  #7 (permalink)  
Старый 08.01.2014, 15:07
Новичок на форуме
Отправить личное сообщение для pro100lexx87 Посмотреть профиль Найти все сообщения от pro100lexx87
 
Регистрация: 08.01.2014
Сообщений: 4

Все таки пришлось немного вникнуть)) спасибо! задачка решена)
Ответить с цитированием
  #8 (permalink)  
Старый 17.01.2014, 14:13
Интересующийся
Отправить личное сообщение для maxSLON Посмотреть профиль Найти все сообщения от maxSLON
 
Регистрация: 17.01.2014
Сообщений: 14

Задачка решена!!!))
http://vk.com/video10055987_167015242 написал!Прошла тест драйв под винду, линукс, осx и множество браузеров
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
выполнение функции после полной загрузки страницы raler jQuery 2 21.01.2016 20:13
Как подгрузить js после загрузки страницы? FRIE Общие вопросы Javascript 5 15.12.2012 00:02
Как имитировать клик по элементу созданого после загрузки страницы? anoth3r jQuery 3 29.09.2011 12:22
Как сделать паузу после загрузки страницы? denisOgr AJAX и COMET 2 06.08.2011 15:01
перегрузка страницы после загрузки ivashka Events/DOM/Window 2 06.07.2010 16:08