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

ГлавнаяJava скрипты → Скрипт плавного перехода

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

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

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

Код скрипта перед тегом </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>

В этом скрипте вы можете изменить параметр (4-ую строку) для появления ссылки (картинки) на определённой высоте при прокрутке страницы, т.е. в данном случае при прокрутки страницы вниз на 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.9;
   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">

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

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


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

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

Димон 16-07-2013

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

Admin 17-07-2013

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

Димон 17-07-2013


Всё получилось, большое спасибочки!!!

Алиса 26-07-2013

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

Admin 27-07-2013

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

Сергей 09-11-2013

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

Admin 09-11-2013

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

Сергей 09-11-2013

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

Александр 18-05-2016

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

В работе: http://www.88002500576.ru