Содержание страницы
домикГлавная / Скрипты java и php / Скрипт наверх с анимацией
Фото анимированная стрелкаАнимированный переход на верх - это такой же плавный и очень красивый переход "На верх", только с использованием анимации. В данном случае идёт показ анимированной стрелки, которая плавно перемещается по экрану монитора в указанном направление на якорный заголовок.

Данный скрипт используется не только для перехода На верх, но и для якорных ссылок, - что смотрится довольно эффективно.

На одну страницу сайта можно установить неограниченное количество таких ссылок с анимированным переходом на верх.
Скрипт очень простой и никаких изменений в нём вам делать абсолютно не нужно, установили и забыли, единственное - это прописывать на вашей странице ссылки с разными идентификаторами ( если их будет больше одной ).

А стилевой файл здесь используется чисто для оформления ссылки (кнопки) перехода Наверх, поэтому с установкой и использованием данного скрипта у вас проблем возникнуть не должно.

И дальше мы с вами и будем разбираться конкретно с этим скриптом.

Для начала - скачайте сам скрипт по ссылке ниже, загрузите его к себе на хостинг в главную директорию, и пропишите в HTML странице, где хотите установить анимированный скрипт на верх, следующий код.

Код перед тегом </head>

htmlCOPY
<link rel="stylesheet" href="css.css">

Код перед тегом </body>

htmlCOPY
<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <script type="text/jаvascript" src="flyMe.min.js"></script> <script type="text/jаvascript"> $(function(){ flyAll (); }); </script>


Всё!
Основные элементы у нас готовы и теперь мы перейдём непосредственно к прописыванию якорных ссылок для анимированного перехода.

Сразу после тега <body> пропишите код:

htmlCOPY
<span id="Section_1"></span>

А внизу страницы перед тегом </body> пропишите:

htmlCOPY
<p class="toclevel-1 tocsection-1"><a href="#Section_1">Перейти наверх</a></p>
Это и будет являтся ссылкой для анимированного перехода наверх.

И точно таким же образом вы делаете анимированные переходы для якорных ссылок, только изменяете ID.

Для простого примера

htmlCOPY
// Якорная ссылка <p class="toclevel-2 tocsection-2"><a href="#Section_2">Перейти к заголовку</a></p> // Ссылающийся объект <p id="Section_2">Заголовок</p>
Можно ли изменить "Анимированную стрелку"?
Сам не пробовал, но думаю это возможно, только с сохранением оригинальных размеров картинки, потому как они прописаны в основном скрипте.

На этом всё! Ставим Лайки, и кому что не понятно, - спрашиваем!

стрелка вниз Скачать переход наверх с анимацией

Ссылка на файл: скачать архив
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!