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

Скролинг страницы вверх и вниз по клику на кнопку
Javascript & jQuery 0    2257 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);
}

Поделиться с друзьями


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

Анимация с линиями для текста
Анимация с огнем для текста
Анимация с сердечками для текста
Анимация с конфетти для текста
Анимация с пузырьками для текста
CSS файлы для браузеров EDGE и IE
Как попросить посетителей своего сайта отключить AdBlock
Обратный таймер на JavaScript
Как сделать маску для ввода E-mail типа ▶ pochta@mail.ru
Как создать div блок с прокруткой на JS?

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

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

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