Frameworks.suFrameworks.su Шпаргалка вебмастера

  • Главная
  • Framework Kohana
  • PHP
  • Javascript
  • CSS
  • Сервисы
    • Генератор паролей
  • Контакты
Главная / Javascript / Плавная кнопка "Наверх" на jQuery

Плавная кнопка "Наверх" на jQuery

29.06.2014 1 14037

Плавная кнопка "Наверх" на jQuery

Многие из Вас видели, что на некоторых сайтах при прокрутке окна браузера, в какой-то момент появляется кнопка "Наверх". Если по ней кликнуть, то начинается плавная перемотка полосы прокрутки до самого верха. Как реализовать плавную кнопку "Наверх" через jQuery, Вы и узнаете из этой статьи.

HTML

Для начала создадим в html нашу кнопку.

<div id="button-up">
    <span>Наверх</span>
</div>

CSS

Добавим стили к нашей кнопки

#button-up {
    display:none;
    left: 0;
    margin: 0;
    position: fixed;
    bottom: 50px;
    outline:none;
    width: 52px;
    color: #333333;
    line-height: 30px;
    text-decoration: none;
    padding: 0px 0 0 28px;
    background: url(../images/icon-arrow-black-up.jpg) no-repeat 7px 11px #ffffff;
    
    border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    -o-border-radius: 0 4px 4px 0;
    
    box-shadow: 0 2px 4px #999;
    -webkit-box-shadow: 0 2px 4px #999;
    -moz-box-shadow: 0 2px 4px #999;
    -o-box-shadow: 0 2px 4px #999;
    cursor:pointer;
}

Javascript и jQuery

Далее создадим функцию которая будет при скролинге страницы показывать или скрывать нашу кнопку. Также сделаем чтобы кнопка не сразу появлялась, а при отступе сверху 50px. Если расстояние до верха меньше 50 px то будем скрывать кнопку. Для того чтобы при нажатии на кнопку, прокрутка в начало страницы была плавной мы добавили функцию animate.

$(document).ready(function(){
    /**
     * При прокрутке страницы, показываем или срываем кнопку
     */
    $(window).scroll(function () {
        // Если отступ сверху больше 50px то показываем кнопку "Наверх"
        if ($(this).scrollTop() > 50) {
            $('#button-up').fadeIn();
        } else {
            $('#button-up').fadeOut();
        }
    });
    
    /** При нажатии на кнопку мы перемещаемся к началу страницы */
    $('#button-up').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
    
});

Вот и все, кнопка готова к использованию. Также вначале не забудьте подключить фреймворк jQuery.

Скачать рабочий пример

Теги:
  • jQuery
  • Пример

Комментарии

  1. UserName
    UserName
    29.08.2019 12:55

    Спасибо большое, все просто и понятно.

    Ответить

Оставить комментарий Отмена

*

*

*

*

Категории

  • PHP
    • Framework Kohana
  • Javascript
  • CSS
  • Администрирование

Теги

Framework Kohana Пример jQuery Уроки CRON Установка и настройка Backup CSS3 Валидация API Bash Cache Captcha i18n Linux

Авторизация

  • Забыли пароль?
  • Регистрация

Популярные статьи

  • Находим расстояние до ближайших станций метро

    Находим расстояние до ближайших станций метро

    17.02.2017 102828
  • Регистрация и авторизация пользователей. Модуль Auth в Kohana 3.3.x

    Регистрация и авторизация пользователей. Модуль Auth в Kohana 3.3.x

    02.07.2014 44444
  • Собственная система лайков на PHP и JQuery

    Собственная система лайков на PHP и JQuery

    06.04.2015 33128
  • Javascript — сумма прописью

    Javascript — сумма прописью

    07.07.2014 22967
  • Cross-domain ajax с помощью jQuery

    Cross-domain ajax с помощью jQuery

    24.04.2015 19840
Copyright © 2014-2025 Frameworks.su. Все права защищены.