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

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

9 1 545

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

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

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

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

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

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

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

Ссылка на файл: jquery.min.js.zip 60

Похожие новости

Димон
  • 0
User: ДимонСкрипт плавного перехода, то что как раз нужно!
Только проблема одна - у меня на неподвижном блоке отображаться не хочет.
Не подскажите в чём проблема?
  • 16 июля 2013 15:15
Админ
  • 0
User: adminushka→ Димон
Скорее всего у вас этот блок имеет в style.css параметр z-index, так вот поставьте такой же параметр на блок плавного перехода в style.css -> в a#move_up и a#move_up:hover, только со значением выше, чем у первого блока.
И всё должно заработать.
  • 17 июля 2013 08:19
Димон
  • 0
Димоныч→ Админ
Получилось и сразу всё заработало!
большое спасибочки!!!
  • 17 июля 2013 17:08
Алиса
  • 0
User: АлисаА подскажите пожалуйста, как мне вместо текста "Наверх" подключить картинку, чтобы она так же менялась при наведении мыши?
  • 26 июля 2013 20:44
Админ
  • 0
User: Глава→ Алиса
Да это просто: в html коде убираете текст "Наверх", а в style.css => в a#move_up и в a#move_up:hover для background: прописываете пути к своим картинкам - первая в пассивном состояние, вторая при наведении.
И там же не забудьте обязательно указать размеры для ваших картинок.
  • 27 июля 2013 07:46
Сергей
  • 0
User: Сержне работает у меня этот скрип хоть убей.
ничего не получается - отображается просто, как ссылка и всё тут.
а я хочу чтоб надпись как у ВАс появлялась, а она у меня как ссілка статическая что делать ума не приложу
  • 9 ноября 2013 17:28
Админ
  • 0
Glavnyi→ Сергей
Не отображается правильно ссылка, - это не значит, что не работает скрипт!!!
Разбирайтесь со стилями внимательней, а не получится, напишите в личку с предоставлением адреса страницы, где установлен скрипт плавного перехода.
  • 9 ноября 2013 17:55
Сергей
  • 0
Серёга→ Админ
И ещё раз здрасти
Сразу хочу выразить свою искрению благодарность админу данного сайта, который не жалея своего времени помогал мне настроить скрипт в личной переписке!
Большое Вам спасибо! Скрипт работает отлично! Хотя на некоторых страницах сайта отказывался работать... Админ посоветовал проверить параметр z-index, но там ошибки я не нашёл... возможно ошибка была с самой вложенности страниц и поэтому проблему решил при помощи написания кода в директории каждой страницы в виде пути нахождения нужного скрипта!
  • 9 ноября 2013 21:43
Александр
  • 0
User: СашаПопробовал Ваш ТОПЕР - всё отлично работает на ура!
Вот он в работе: http://www.88002500576.ru
  • 18 мая 2016 15:57