Анимированный переход наверх

ГлавнаяJava скрипты → Анимированный переход наверх

Содержание:

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


Переход к якорной ссылке


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

Работу данного скрипта вы можете посмотреть непосредственно на этой странице, нажав либо на:

1) якорную ссылку - Переход к якорной ссылке (смотрите выше);
2) либо на Стрелку (в самом низу вправой стороне).

На одну страницу сайта можно установить неограниченное количество таких ссылок с анимированным переходом.

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

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

Как установить анимированный переход наверх

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

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


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

Создайте стилевой файл style.css и в HTML странице пропишите путь к нему:


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

А в самом файле style.css пропишите следующий код для отображения кнопки Перехода наверх


div#cxz_up{
position:fixed;
bottom:60px;
float:right;
right:10px;
display:line;
background:#99ccff;
padding:0 2px 4px 2px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-ms-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
border:2px solid #6699cc;
z-index:1000104;
}
div#cxz_up:hover{border:2px solid #336699; z-index:1000105;}
div#cxz_up p{margin:0;padding:0;font-size:24px;}
#flesh{z-index:1000106;}

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

Любая якорная ссылка здесь имеет такой вид:
<p class="toclevel-1 tocsection-1"><a href="#Section_1"><span class="toctext">Некий текст</span></a></p>

А ссылающийся объект (на что ссылается якорная ссылка) будет прописан так:
<span class="mw-headline" id="Section_1"></span>

Например, вы хотите сделать на странице Переход наверх, и для этого вам нужно прописать вот так:

  • <span class="mw-headline" id="Section_1"></span> - прописываете в самый верх страницы, например, перед блоком вашего: Меню;
  • <p class="toclevel-1 tocsection-1"><a href="#Section_1"><span class="toctext">Некий текст</span></a></p> - прописываете в самом низу страницы перед закрывающимся тегом </body>.

Теперь рассмотрим ситуацию, когда вы захотите добавить на страницу не одну якорную ссылку. И для этого мы будем использовать такой же код, только меняя цифры в tocsection-1 и Section_1.
Например, для второй якорной ссылки и объекта мы пропишем уже такой код:

<p class="toclevel-1 tocsection-2"><a href="#Section_2"><span class="toctext">Некий текст</span></a></p>
<span class="mw-headline" id="Section_2"></span>

И последующие ссылки будут иметь идентичный вид с изменёнными идентификаторами.

Можно ли изменить "Анимированную стрелку"?
Сам не пробовал, но думаю это возможно, только с сохранением оригинальных размеров картинки, потому как они прописаны в основном скрипте.


Скачать скрипт Анимированного перехода наверх


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

Поделись ссылкой с друзьями:

Комментарии к статье