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

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

Скрипт очень простой и исправно работает во всех основных браузерах.

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

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


<script type="text/jаvascript" src="js/jquery.min.js"></script>
<script type="text/jаvascript">
 $(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>

htmlCOPY
<a id="move_up" href="#">Наверх</a>
Это код вы вставляете в любое место своей страницы между тегами: <body> и </body>. Я для примера, ставлю его в самом конец страницы перед закрывающимся тегом </body>.

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

cssCOPY
<style> 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; } </style>
Как вы видите из выше указанного кода, наш блок зафиксирован - о чём свидетельствует параметр со значением position: fixed;, параметры top: и left: указывают координаты расположения этого блока на странице. Если вы хотите поставить блок вниз, то для этого стоит только заменить top: на bottom: и указать нужные для него значения.

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

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

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

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

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

Ссылка на файл: скачать архив
Комментарии
Димон
10 июля 2018 16:58
Димон
Скрипт плавного перехода, то что как раз нужно!
Только проблема одна - у меня на неподвижном блоке отображаться не хочет.
Не подскажите в чём проблема?
Admin
10 июля 2018 17:24
Admin
Скорее всего у вас этот блок имеет в style.css параметр z-index.
Так вот поставьте такой же параметр на блок плавного перехода в style.css -> a#move_up, только со значением выше, чем у первого блока.
И всё должно заработать.
Димон
10 июля 2018 19:21
Димон
Получилось и сразу всё заработало!
большое спасибочки!!!
Алиса
11 ноября 2018 09:07
Алиса
А подскажите пожалуйста,
как мне вместо текста Наверх подключить картинку, чтобы она так же менялась при наведении мыши?
Admin
11 ноября 2018 12:31
Admin
Да это просто: в html коде убираете текст Наверх, а в style.css => a#move_up и в a#move_up:hover для background: прописываете пути к своим картинкам - первая в пассивном состояние, вторая при наведении.
И там же не забудьте обязательно указать размеры для ваших картинок.
Вот к примеру так:
cssCOPY
a#move_up { background: rgba(0, 0, 0, 0) url("images/1.jpg") no-repeat scroll 0 0; height: 40px; width: 40px; } a#move_up:hover { background: rgba(0, 0, 0, 0) url("images/2.jpg") no-repeat scroll 0 0; }
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!