Ремонты цифровой техники
Вернуться:
Дополнительно
Поиск по сайту
поиск
Главная > Создание сайтов > Полезные скрипты для сайта
Красивые кнопки вверх и вниз для сайта на html, css, JavaScript
Страница статьи

Красивые кнопки вверх и вниз для сайта на html, css, JavaScript

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

Была небольшая промежуточная проблема с прокруткой экрана покупателем, так как на терминале нет мыши, а только сенсорный экран (тачскрин, способен распознать одновременно только одно касание, совсем не мультитач). Вот и пришла мне в голову мысль о создании боковой навигации для плавной прокрутки экрана пользователями с помощью скрипт кнопок на сайт вверх и вниз.

красивые кнопки вверх для сайта html js css

Мои кнопки медленной прокрутки можно наблюдать справа на рисунке, это принтскрин экрана терминала, а так же сбоку на странице в браузере. Был удивлен, если честно, что в сети нет таких решений, все что удалось найти это красивые полосы прокрутки для различных блоков с текстом на jQuery, да обычные кнопки вверх для сайта, этих вообще навалом везде, на любой вкус и цвет.

Может искать не умею:)

Итак, хотелось бы еще добавить прежде чем переходить к самому коду, старайтесь делать такие вещи как можно менее ресурсоемкими, старайтесь обходиться только чистым JavaScript, html, css. Это увеличит вероятность того что у посетителя все хорошо загрузится в браузер и заработает, он останется, а не уйдет с вашего сайта.

Ниже приведен сам код JS, который и обеспечивает плавный scroll всего экрана, его перелистывание вверх и вниз.

        function ScrollUp(){
            var t,s,new_offset;
            s=document.body.scrollTop||window.pageYOffset;
            new_offset = s - 300;
          t=setInterval(
            function(){
                if(s>new_offset) window.scroll(0,s-=5); else clearInterval(t)},5
                );
        }

        function ScrollDown(){
            var t,s,new_offset;
            s=document.body.scrollTop||window.pageYOffset;
            new_offset = s + 300;
          t=setInterval(
            function(){
                if(s < new_offset) window.scroll(0,s+=5); else clearInterval(t)},5

                );
        }

 Изменяя размер нового смещения, можно делать шаг прокрутки длиннее или короче, если вместо 300 указать высоту экрана, то будет перелистана страница целиком. Теперь о том как сделать обычную кнопку вверх для сайта. Для этого в функции ScrollUp() должна быть равна нулю переменная отвечающая за новое положение new_offset = 0; это частный случай обычной кнопки вверх. ScrollDown() в таком случае просто не используется. Вот сами кнопки:

    < div id="ScrollBlock" >
        < img onclick="ScrollUp();return!1;" src="/image/scroll/arrow_up.png" alt="вверх" >  < br />< br />
        < img onclick="ScrollDown();return!1;" src="/image/scroll/arrow_down.png" alt="вниз" >    
    < / div >

 И стили:

     #ScrollBlock{
        display:block;position:fixed;
        /*положение блока*/
        bottom:450px;right:0px;
         /*оформление блока*/
        width:64px;height:162px;padding:25px 10px 5px;font-size:16px;
        background:#ddd;
        -webkit-border-radius:15px;
        -moz-border-radius:15px;
        border-radius:15px;
        opacity: 0.5;       
     }

Скрипт кнопка на сайт совместим со всеми популярными браузерами, кроме IE, в нем так и не удалось его наладить. Но скрипт кнопка для сайта хорошо работает на Chrome, Mozilla, Opera. Ниже по ссылке вы можете скачать бесплатно архив с исходником кнопок вверх и вниз.

Скачать архив кнопки вверх и вниз

Код можно вставить в любой сайт, в том числе на wordpress и joomla. Например в footer сайта. Это легкий рабочий пример, не требующий для работы никаких дополнительных библиотек и плагинов.

вверх

вниз

Опубликовано 2017-04-17 03:11:59