ГлавнаяСкрипты java и phpСкрипт плавного перехода на верх

Скрипт плавного перехода на верх

плавнй переход на верх

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

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

Перейдём к установки Скрипта плавного перехода на сайте.

Код скрипта перед тегом </head>


<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
 $(function () {
  $(window).scroll(function () {
    if ($(this).scrollTop() > 200) $('a#move_up').fadeIn();
      else
       $('a#move_up').fadeOut(400);});
       $('a#move_up').click(function (){
         $('body,html').animate({
           scrollTop: 0}, 800);
           return false;
});});
</script>

В этом скрипте вы можете изменить параметр (5-ую строку) для появления ссылки (картинки) на определённой высоте при прокрутке страницы, т.е. в данном случае при прокрутки страницы вниз на 200px у нас появится ссылка (картинки) для перехода на верх при её нажатии. До 200px ссылка (картинка) показана не будет. Каждый настраивает этот параметр под себя.

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


<a id="move_up" href="#">Наверх</a>

Это код вы вставляете в любое место своей страницы между тегами: <body> и </body>. Я для примера, ставлю его в самом конец страницы перед закрывающимся тегом </body>.

Стилевое оформление в файле style.css


a#move_up {
   position: fixed;
   top: 125px;
   left: 90%;
   display: none;
   width: 60px;
   height: 16px; 
   text-align: center;
   font: 10px Verdana;
   text-decoration: none;
   color: #2b587a;
   background: #e1e7ed;
   padding-top:2px;
   opacity:0;
   filter: alpha(opacity=90);
}
a#move_up:hover {
   color: #fff;
   background: #597da3;
}

Как вы видите из выше указанного кода, наш блок зафиксирован - о чём свидетельствует параметр со значением position: fixed;, параметры top: и left: указывают кординаты расположения этого блока на странице. Если вы хотите поставить блок вниз, то для этого стоит только заменить top: на bottom: и указать нужные для него значения.

Параметры width: и height: - это соответственно ширина и высота блока, далее идут настройки для отображаемого текста: его местоположение, размер и цвет. С помощью параметра background: вы задаёте фоновый цвет блока, или указывете на картинку, например: background: url(images/fon.jpg) no-repeat;. При наведении мыши на блок отвечает "id" move_up:hover.

Обязательно пропишите следующий код в своей страницы для подключения стилевого файла.

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


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

И последнее, что вам нужно сделать, это скачать дополнительный java скрипт указанный в первом коде перед тегом </head> - скрипт jquery.min.js и залить его к себе на сервер в главную директорию (где главная страница).

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

Рейтинг: 4.8/5     Оценили: 10

Рекомендую почитать

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

Димон

User: ДимонСкрипт плавного перехода, то что как раз нужно!
Только проблема одна - у меня на неподвижном блоке отображаться не хочет.
Не подскажите в чём проблема?

Админ

User: Админ→ Димон
Скорее всего у вас этот блок имеет в style.css параметр z-index, так вот поставьте такой же параметр на блок плавного перехода в style.css -> в a#move_up и a#move_up:hover, только со значением выше, чем у первого блока.
И всё должно заработать.

Димон

User: Димон→ Админ
Получилось и сразу всё заработало!
большое спасибочки!!!

Алиса

User: АлисаА подскажите пожалуйста, как мне вместо текста "Наверх" подключить картинку, чтобы она так же менялась при наведении мыши?

Админ

User: Админ→ Алиса
Да это просто: в html коде убираете текст "Наверх", а в style.css => в a#move_up и в a#move_up:hover для background: прописываете пути к своим картинкам - первая в пассивном состояние, вторая при наведении.
И там же не забудьте обязательно указать размеры для ваших картинок.

Сергей

User: Сергейне работает у меня этот скрип хоть убей.
ничего не получается - отображается просто, как ссылка и всё тут.
а я хочу чтоб надпись как у ВАс появлялась, а она у меня как ссілка статическая что делать ума не приложу

Админ

User: Админ→ Сергей
Не отображается правильно ссылка, - это не значит, что не работает скрипт!!!
Разбирайтесь со стилями внимательней, а не получится, напишите в личку с предоставлением адреса страницы, где установлен скрипт плавного перехода.

Сергей

User: Сергей→ Админ
И ещё раз здрасти
Сразу хочу выразить свою искрению благодарность админу данного сайта, который не жалея своего времени помогал мне настроить скрипт в личной переписке!
Большое Вам спасибо! Скрипт работает отлично! Хотя на некоторых страницах сайта отказывался работать... Админ посоветовал проверить параметр z-index, но там ошибки я не нашёл... возможно ошибка была с самой вложенности страниц и поэтому проблему решил при помощи написания кода в директории каждой страницы в виде пути нахождения нужного скрипта!

Александр

User: АлександрПопробовал Ваш ТОПЕР - всё отлично работает на ура!