2 способа создать кнопку «Наверх»

Простой скрипт, тем не менее, часто используется. Казалось бы – мелочь, но из них и складывается ориентированный на пользователя интерфейс.


Наши посетители давно привыкли получать нужное одним движением пальца. Постепенно понятие пользовательского интерфейса (UI – user interface) стало зависеть от опыта пользователя (UX – user experience).
Естественно, что опыт пользователь получает именно с наших сайтов. Их огромное количество является средой естественного отбора, но массовое применение любого функционала, в конце концов, приучает посетителя невольно искать такой же везде.
К настоящему времени уже сложился определенный набор обязательных для сайта элементов, входящих в привычный UX пользователя:
  • проверка заполнения форм;
  • большие CTA-кнопки;
  • подсветка ссылок и меню;
  • плавный скроллинг и т.д.
И быстрая прокрутка страницы наверх тоже относится к этому набору. Небольшая незаметная кнопка, расположенная внизу, очень важна для удобства пользователя. Дизайнеры давно отучили посетителей своих сайтов от прокрутки колесика мышки.
Поэтому разберем, как сделать эту кнопками средствами только редактора и средствами JQuery. Исходный текст скрипта можно посмотреть здесь.
Нам понадобятся стандартный блок, а прокрутку осуществим с JQuery.

Используем платформу PIXLI


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

А затем настройте функцию прокрутки.

Используем JQuery


Кнопка работает, но у нее есть два существенных недостатка:
  1. Она всегда видна.
  2. Прокрутка не плавная.
Чтобы это изменить, добавим собственный код. Воспользуемся не кнопкой, а блоком. Вставим его на сайт и установим те же настройки что для кнопки
В итоге в правом нижнем углу у нас появится блок. Необходимо его раскрасить и/или вставить в него рисунок. Во вкладке «Трансформация (преобразование)» укажем прозрачность 50%.

В этот же блок добавим виджет «HTML-код». В него добавим функцию, обрабатывающую наш блок.
<script>
$(function(){$.fn.scrollToTop=function(){
    $(this).hide();
        if($(window).scrollTop()!="0"){
            $(this).fadeIn("slow")
        }
        var scrollDiv=$(this);
        $(window).scroll(function(){
            if($(window).scrollTop()=="0"){
                $(scrollDiv).fadeOut("slow")
                }else{$(scrollDiv).fadeIn("slow")}
            });
            $(this).click(function(){
                $("html, body").animate({scrollTop:0},"slow")
            })
}});
Теперь нам надо вызвать функцию, чтобы при наведении мыши на кнопку она появлялась. Для этого следует скопировать селектор в буфер обмена. Наведите на блок указатель мыши и нажмите правую клавишу.

Затем добавьте после функции код вызова:
$(function() { 
    $("#id1c98daa2-15c3-505c-19d9-71ffee310e0e").scrollToTop(); 
}); 
  </script>

Как это работает


Первая строка создает новую JQuery функцию scrollToTop.
$(function(){$.fn.scrollToTop=function(){
This – это обращение к элементу, который вызвал функцию. У нас это блок, в котором размещен html-код. Hide() – это метод JQuery, который скрывает элемент
$(this).hide();
Метод scrollTop возвращает значение отступа прокрутки сверху для элемента. Так как мы обращаемся к окну, то и значение будет как раз равно тому, насколько была прокручена страница вниз. Проверяем, если это значение не равно 0, то медленно показываем наш блок. За это отвечает метод fadeIn()
if($(window).scrollTop()!="0"){
            $(this).fadeIn("slow")
        }
Дальше нам будет нужна функция, которая будет реагировать на прокрутку. Чтобы в ней тоже можно было менять состояние нашего блока, запомним ссылку на него в переменную scrollDiv.
var scrollDiv=$(this);
Функция вызвается по событию scroll
$(window).scroll(function(){
И в ней тоже проверяется, не достиг ли документ верха окна.
if($(window).scrollTop()=="0"){
Если да – блок скрывается методом fadeOut()
$(scrollDiv).fadeOut("slow")
Если нет – показывается методом fadeIn()
}else{$(scrollDiv).fadeIn("slow")}
По щелчку на кнопку медленно прокручиваем документ вверх. Это делается с помощью метода animate, в котором устанавливается медленный переход к значению свойства scrollTop=0.
$(this).click(function(){
                $("html, body").animate({scrollTop:0},"slow")
            })
Вызов функции описываем ниже, привязывая его к ID нашего блока.
$(function() { 
    $("#id1c98daa2-15c3-505c-19d9-71ffee310e0e").scrollToTop(); 
});

Небольшой код делает вашу страницу привлекательнее и привычнее.
31 2017, 09:17    Ivan Web-дизайн 0    6 0

comments (0)

    ticket_comment_err_no_auth