Скролинг страницы вверх и вниз по клику на кнопку

Скролинг страницы вверх и вниз по клику на кнопку
Javascript & jQuery 0    303 0

Данный скрипт позволяет плавно прокручивать страницу вверх и вниз по клику на соответствующие кнопки. Эти кнопки располагаются, для удобства, в левом нажнем углу монитора, но по желанию их можно зафиксировать в любом другом месте.

Кнопки имеют нейтральный дизайн, и подойдут к любому сайту. Чтобы не отвлекать посетителя от прочтения статьи, - кнопки при скроллинге страницы становятся прозрачными.

кнопки прокрутки вниз вверх

Подключается данный скрипт строго после бибилиотеки jQuery, как показано ниже.

    
    
    
    

Оборачиваем свой контент на сайте в DIV с id = content и добавляем наши кнопки:

    
тут статья

Осталось навести красоту и прописать CSS оформление:

.nav_up{
    padding:7px;
    background-color:white;
    border:1px solid #CCC;
    position:fixed;
    background:transparent url(../images/arrow_up.png) no-repeat top left;
    background-position:50% 50%;
    width:20px;
    height:20px;
    bottom:10px;
    opacity:0.7;
    left:30px;
    white-space:nowrap;
    cursor: pointer;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-top-right-radius:3px;
    -khtml-border-top-left-radius:3px;
    -khtml-border-top-right-radius:3px;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
    padding:7px;
    background-color:white;
    border:1px solid #CCC;
    position:fixed;
    background:transparent url(../images/arrow_down.png) no-repeat top left;
    background-position:50% 50%;
    width:20px;
    height:20px;
    bottom:10px;
    opacity:0.7;
    left:70px;
    white-space:nowrap;
    cursor: pointer;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-top-right-radius:3px;
    -khtml-border-top-left-radius:3px;
    -khtml-border-top-right-radius:3px;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Похожие статьи:

Как попросить посетителей своего сайта отключить AdBlock
Обратный таймер на JavaScript
Как сделать маску для ввода E-mail типа ▶ pochta@mail.ru
Как создать div блок с прокруткой на JS?
Калькулятор расчета стоимости натяжных потолков на jQuery
Parallax эффект для одиночного элемента с библиотекой RELLAX
Плавная прокрутка страницы после нажатия на якорную ссылку
jQuery анимация для сайта - эффекты появления DIV блоков

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

    Вы должны авторизоваться, чтобы оставлять комментарии.

    Вы можете авторизоваться на сайте через:
    YandexVkontakte

    Рубрики блога

    Последние комментарии

    Алексей Власов 16 октября 2018, 14:27
    Универсальный и очень простой PHP парсер 10
    Алексей Власов 13 октября 2018, 18:57
    Бесконечное сохранение ресурсов в MODX 2
    Александр Петров 30 сентября 2018, 20:54
    Пишем на SQL без SQL: основы по RedBean PHP 10