Здравствуйте Гость!


Запомнить.
Авто. вход.
Забыли пароль?
Регистрация

ПОДПИСКА Подписавшись по E-mail, Вы будете получать уведомления о новых статьях к себе на почту.
Подписатся на почтовую рассылку на сайте astranar.ru
Подписаться



ДОБАВЛЯЙТЕСЬ В ДРУЗЬЯ Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте на стене моего аккаунта.
Мой аккаунт Вконтакте
Мой аккаунт
Главная - Javascript - Кнопка наверх, с исчезновением и медленным скролингом .


Кнопка наверх, с исчезновением и медленным скролингом .


Кнопка наверх, с исчезновением и медленным скролингом

По просьбе я пишу статью про кнопку наверх, предыдущая статья Как сделать кнопку "Наверх" затронула тему как перейти на вверх страницы, без всяких излишек... в этой же статье я расскажу вам как сделать красивую кнопку наверх Собственно сам код, ничего сложного... Js библиотека - up_down.zip 

<script type="text/javascript" src="js/up_down.js"></script>// Подключаем js библиотеку... ссылка на нее находится выше
 <script type="text/javascript"> 
$(function () { 
 $(window).scroll(function () { 
 if ($(this).scrollTop() > 300) $('a#move_up').fadeIn();// если пользователь прокрутил больше 300 пикселей вниз, показываем кнопку.  
 else $('a#move_up').fadeOut(400);// скорость скрытия кнопки 
 }); 
 $('a#move_up').click(function () { 
 $('body,html').animate({ 
 scrollTop: 0 // Сколько пикселей нужно оставить вверху
 }, 250); скорость прокрутки, чем выше число, тем медленней будет прокрутка
 return false; 
 }); 
}); 
</script>
 </head>
 <body>
 <div align="left" >// Выравниваем div  с кнопкой наверх по левому краю страницы
 <a id="move_up" href="#" >Наверх</a>// так же на ваш вкус можете сделать стили для кнопки
 </div>
Вот собственно и все, код прокомментирован, если что как всегда я - готов ответить. Удачи вам.



Просмотров страницы: 5281
Урок добавлен: 25 Августа 2012

<<<Предыдущая статьяСледущая статья >>>

Копирование материалов разрешается только с указанием автора (Пальгов Олег) и индексируемой прямой ссылкой на сайт (https://astranar.ru/)!

Добавляйтесь ко мне в друзья ВКонтакте: https://vk.com/palgov_oleg. Если Вы хотите оценить меня и мою работу, то напишите на стене моего аккаунта ВКонтакте.

Если Вы не хотите пропустить новые материалы на сайте, то Вы можете подписаться на обновления:
Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Ещё статьи по javascript:
• События с ссылками при переходе по ссылке, или при закрытии страницы
• Смена текста в базе кликом
• javascript onload, курсор javascript.
• Запуск нескольких функций в onload


Комментарии (0)


Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Кнопка наверх, с исчезновением и медленным скролингом .
Непрочитанные книги умеют мстить.

Рэй Бредбери

Вступайте в группу!