Html css js кнопка крутится. Плавная кнопка "Наверх" на jQuery

Ах, как быстро привыкает человек к удобству, независимо, где он находится: дома или на сайте! Не знаю как вы, но я привык пользоваться кнопкой «Наверх» , а особенно это удобно, когда статья больших размеров.
Итак, в этой статье я расскажу, как сделать кнопку «Наверх» для сайта , используя библиотеку jQuery.

1. Подключим библиотеку jQuery. Кстати, об этом я писал недавно .
Добавьте между тегами … вот этот код:

2. Добавляем между тегами саму кнопку-ссылку «Наверх»:

наверх наверх

и сразу после кнопки «Наверх» добавьте код JavaScript:

$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) $("a#move_up").fadeIn(); else $("a#move_up").fadeOut(400); }); $("a#move_up").click(function(){ $("body,html").animate({scrollTop: 0}, 450); return false; }); });

Обратите внимание на строку №6 , там есть цифра 100 – она указывает, через какое количество слов должна появляться кнопка «Наверх». Вы можете указать любую другую подходящую для вас цифру.
В строке №11 есть цифра 450 – указывает скорость подъема страницы. Вы можете тоже указать свою цифру. Чем выше цифра, тем медленнее страница поднимается наверх, чем меньше цифра, тем быстрее страница окажется наверху.

3. Теперь добавьте код CSS. Кто не знает, как подключить CSS к HTML файлу, почитайте об этом тут.

A#move_up { position:fixed; /* фиксированное положение блока*/ top:8px; right:20px; width:56px; height:20px; display:none; text-align:center; font:12px Arial,Verdana,sans-serif; color:#fff; background:#3366ff; padding-top:5px; /*прозрачность*/ opacity:0.7; filter:alpha(opacity=70); border-radius: 2px; text-decoration:none; } a#move_up:hover { opacity:0.9; filter: alpha(opacity=90); }

Вот это и все. Вот так выглядит полностью готовый код:

a#move_up{ position:fixed; /* фиксированное положение блока*/ top:8px; right:20px; width:56px; height:20px; display:none; text-align:center; font:12px Arial,Verdana,sans-serif; color:#fff; background:#3366ff; padding-top:5px; /*прозрачность*/ opacity:0.7; filter:alpha(opacity=70); border-radius: 2px; text-decoration:none;} a#move_up:hover{ opacity:0.9; filter: alpha(opacity=90);} Ваш текст (желательно больше текста) наверх $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) $("a#move_up").fadeIn(); else $("a#move_up").fadeOut(400); }); $("a#move_up").click(function(){ $("body,html").animate({scrollTop: 0}, 50); return false; }); });

Теперь при прокрутке страницы вниз будет появляться небольшой синий полупрозрачный блок с надписью «Наверх».

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

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

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

Чтобы задействовать кнопку на своем сайте, нет необходимости добавлять какие либо теги в разметку HTML страницы. Достаточно подключить библиотеку jQuery и прописать небольшой исполняемый js, и кнопка будет работать. Оформление внешнего вида и анимацию сформируем с помощью CSS, подключив файл стилей style.css к документу html.

Javascript jQuery

И так, если у вас на сайте, ещё не подключена библиотека jQuery, это легко сделать, подключив актуальную версию напрямую из сети доставки контента (CDN) Google, для этого достаточно, перед закрывающим тегом прописать следующую строку:

< script src= "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" >

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

< script> jQuery(document) . ready(function ($) { var //скорость прокрутки к началу страницы speed = 500 , //html-разметка кнопки $scrollTop = $("" ) . appendTo("body" ) ; $scrollTop . click(function (e) { e. preventDefault() ; $( "html:not(:animated),body:not(:animated)" ) . animate({ scrollTop: 0 } , speed ) ; } ) ; //настройка режима появления кнопки function show_scrollTop() { ( $(window) . scrollTop() > 300 ) ? $scrollTop . fadeIn(600 ) : $scrollTop . fadeOut(600 ) ; } $(window) . scroll( function () { show_scrollTop() ; } ) ; show_scrollTop() ; } ) ;

jQuery(document).ready(function($){ var //скорость прокрутки к началу страницы speed = 500, //html-разметка кнопки $scrollTop = $("").appendTo("body"); $scrollTop.click(function(e){ e.preventDefault(); $("html:not(:animated),body:not(:animated)").animate({ scrollTop: 0}, speed); }); //настройка режима появления кнопки function show_scrollTop(){ ($(window).scrollTop() > 300) ? $scrollTop.fadeIn(600) : $scrollTop.fadeOut(600); } $(window).scroll(function(){ show_scrollTop(); }); show_scrollTop(); });

Добавил в скрипт некоторые комментарии, так сказать, для большего понимания. Как писал выше, данный метод исключает необходимость добавлять какие-либо теги в разметку HTML страницы, с этим прекрасно справляется скрипт. Когда пользователь прокрутит страницу вниз на 300px, плагин пропишет тег кнопки, в нашем случае это:

< a href= "#" title= "Быстро вернуться наверх" class = "scrollTop" >< i class = "fa fa-angle-double-up" >

в тело страницы, всё там же перед закрывающим тегом .

Для плавного появления и скрытия кнопки используем функции.fadeIn () и.fadeOut () с заданной скоростью 600 миллисекунд. Скорость прокрутки к началу страницы выставляем в значении 500 миллисекунд.

CSS

Для разметки кнопки использовал тег , ссылку в адрес которой, прописал хеш(решётка), атрибут title — при наведении на кнопку будет выводится стандартная подсказка, присвоил определённый класс с именем селектора scrollTop , а в качестве анкора ссылки применил шрифт-иконку из пакета Font Awesome .
Теперь, зная имя селектора, непосредственно в CSS, с помощью определённых свойств, оживим нашу кнопку, сформируем внешний вид, определим место появления на странице, а так же прикрутим анимацию.
Внутри кода css, практически каждому свойству, добавил подробные комментарии, так что не вижу смысла расписывать всё подробно, отдельно остановлюсь на эффекте анимации и подключении шрифт- иконок в качестве элемента кнопки.
Иконка может быть и другая, не такая как в примере, главное чтобы она соответствовала прямому назначению кнопки, в нашем случае, это любой указательный символ, например, одиночные стрелки, объёмные или тонкие, с заливкой или без, явно указывающие направление прокрутки при нажатии на кнопку.
Для того чтобы использовать иконки Font Awesome, нет необходимости загружать весь пакет, существует возможность подключения библиотеки напрямую, например с Bootstrap CDN, для этого в HTML, в разделе, достаточно прописать следующую строку:

< link href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel= "stylesheet" type= "text/css" >

После подключения Font Awesome, вы можете использовать их в коде HTML или, как в нашем случае в js, с помощью специальных классов, базового fa и класса для определённого типа иконки, у нас это fa-angle-double-up . Узнать класс той или иной иконки можно на сайте .
Внешний вид контейнера иконки, размер и цвет фона, позиционирование, цвет и размер шрифта, всё это определяем уже непосредственно в css, ориентируясь на селектор.scrollTop i

/* формируем тело кнопки, положение и эффект перехода */ .scrollTop { /* по-умолчанию скрыта */ display : none ; /* скругяем углы */ -webkit-border-radius: 100% ; -moz-border-radius: 100% ; -ms-border-radius: 100% ; border-radius : 100% ; /* фиксируем позицию кнопки */ position : fixed ; /* размеры кнопки */ width : 60px ; height : 60px ; /* положение кнопки */ right : 1rem ; bottom : 1rem ; /* вид курсора */ cursor : pointer ; /* эффект перехода между двумя состояниями кнопки */ -webkit-transition: bottom 0.2s cubic-bezier (0.42 , 0 , 0.58 , 1 ) ; -moz-transition: bottom 0.2s cubic-bezier (0.42 , 0 , 0.58 , 1 ) ; -ms-transition: bottom 0.2s cubic-bezier (0.42 , 0 , 0.58 , 1 ) ; -o-transition: bottom 0.2s cubic-bezier (0.42 , 0 , 0.58 , 1 ) ; transition : bottom 0.2s cubic-bezier (0.42 , 0 , 0.58 , 1 ) } /* смещение кнопки вверх при наведении */ .scrollTop : hover { bottom : 2rem } /* дополнительные элементы офрмления кнопки */ .scrollTop : before , .scrollTop : after { content : "" ; top : 0 ; left : 0 ; background-color : #766DCC ; width : 60px ; height : 60px ; -webkit-border-radius: 100% ; -moz-border-radius: 100% ; -ms-border-radius: 100% ; border-radius : 100% ; -webkit-animation-fill-mode: both ; -moz-animation-fill-mode: both ; animation-fill-mode : both ; position : absolute ; opacity : 0 ; } /* определяем имя, тип и скорость анимации лля:before */ .scrollTop : before { background-color : #736cad ; -webkit-animation: clickMe 1.8s 333ms infinite ease-out; -moz-animation: clickMe 1.8s 333ms infinite ease-out; animation : clickMe 1.8s 333ms infinite ease-out } /* определяем имя, тип и скорость анимации лля:after */ .scrollTop : after { -webkit-animation: clickMe 1.8s 777ms infinite ease-out; -moz-animation: clickMe 1.8s 777ms infinite ease-out; animation : clickMe 1.8s 777ms infinite ease-out } /* формируем вид иконки */ .scrollTop i { width : 30px ; height : 30px ; display : block ; background : rgba (28 , 144 , 243 , 0.61 ) ; color : #fff ; text-align : center ; line-height : 30px ; font-size : 1.3rem ; background-size : 12px ; -webkit-border-radius: 100% ; -moz-border-radius: 100% ; -ms-border-radius: 100% ; border-radius : 100% ; position : absolute ; left : 15px ; top : 15px ; z-index : 100 } /* анимация */ @-webkit-keyframes clickMe { 0% { opacity : 0 ; -webkit-transform: scale (0 ) } 5% { opacity : 1 } 100% { opacity : 0 } } @-moz-keyframes clickMe { 0% { opacity : 0 ; -moz-transform: scale (0 ) } 5% { opacity : 1 } 100% { opacity : 0 } } @keyframes clickMe { 0% { opacity : 0 ; -webkit-transform: scale (0 ) ; -moz-transform: scale (0 ) ; -ms-transform: scale (0 ) ; -o-transform: scale (0 ) ; transform : scale (0 ) } 5% { opacity : 1 } 100% { opacity : 0 } }

/* формируем тело кнопки, положение и эффект перехода */ .scrollTop { /* по-умолчанию скрыта */ display: none; /* скругяем углы */ -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; /* фиксируем позицию кнопки */ position: fixed; /* размеры кнопки */ width: 60px; height: 60px; /* положение кнопки */ right: 1rem; bottom: 1rem; /* вид курсора */ cursor: pointer; /* эффект перехода между двумя состояниями кнопки */ -webkit-transition: bottom 0.2s cubic-bezier(0.42, 0, 0.58, 1); -moz-transition: bottom 0.2s cubic-bezier(0.42, 0, 0.58, 1); -ms-transition: bottom 0.2s cubic-bezier(0.42, 0, 0.58, 1); -o-transition: bottom 0.2s cubic-bezier(0.42, 0, 0.58, 1); transition: bottom 0.2s cubic-bezier(0.42, 0, 0.58, 1) } /* смещение кнопки вверх при наведении */ .scrollTop:hover { bottom: 2rem } /* дополнительные элементы офрмления кнопки */ .scrollTop:before, .scrollTop:after { content: ""; top: 0; left: 0; background-color: #766DCC; width: 60px; height: 60px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; position: absolute; opacity: 0; } /* определяем имя, тип и скорость анимации лля:before */ .scrollTop:before { background-color: #736cad; -webkit-animation: clickMe 1.8s 333ms infinite ease-out; -moz-animation: clickMe 1.8s 333ms infinite ease-out; animation: clickMe 1.8s 333ms infinite ease-out } /* определяем имя, тип и скорость анимации лля:after */ .scrollTop:after { -webkit-animation: clickMe 1.8s 777ms infinite ease-out; -moz-animation: clickMe 1.8s 777ms infinite ease-out; animation: clickMe 1.8s 777ms infinite ease-out } /* формируем вид иконки */ .scrollTop i { width: 30px; height: 30px; display: block; background: rgba(28, 144, 243, 0.61); color: #fff; text-align: center; line-height: 30px; font-size: 1.3rem; background-size: 12px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; position: absolute; left: 15px; top: 15px; z-index: 100 } /* анимация */ @-webkit-keyframes clickMe { 0% { opacity: 0; -webkit-transform: scale(0) } 5% { opacity: 1 } 100% { opacity: 0 } } @-moz-keyframes clickMe { 0% { opacity: 0; -moz-transform: scale(0) } 5% { opacity: 1 } 100% { opacity: 0 } } @keyframes clickMe { 0% { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0) } 5% { opacity: 1 } 100% { opacity: 0 } }

Осталось рассмотреть саму анимацию. Эффект анимации применён не ко всей кнопке, а к дополнительным псевдоэлементам:after и:before . Чтобы создать CSS-анимацию необходимо добавить в стили этих элементов свойство animation , что позволит определить имя, настроить ускорение и продолжительность анимации, а также другие детали того, как анимация должна протекать. Внешний вид анимации настраивается с помощью @keyframes , набора ключей настраивающего кадры анимации.

В нашем примере имя анимации: clickMe , длительность: 1.8s , задержка: 333ms для:before и 777ms для псевдоэлемента:after . Так же определяем количество повторении анимации — бесконечное infinite и тип анимации ease-out — ускорение в начале.

После того, как мы настроили временные свойства анимации, остаётся определить внешний вид анимации, делается это внутри блока @keyframes . Сначала задается имя анимации, а затем внутри фигурных скобок описываются её шаги. Из примера кода видно, что используются кадры свойства opacity (прозрачность) и трансформации элемента transform с функцией scale — масштаб элемента. Шаги анимации заданы через проценты.
Анимация CSS свойств описана отдельно для webkit-браузеров @-webkit-keyframes и браузера Mozilla Firefox @-moz-keyframes , дабы исключить некорректное отображение анимации в этих веб-браузерах.

На этом всё. Ещё раз просмотрите живой пример работы кнопки «Вернуться наверх» и если оно вам надо, скачивайте исходники упакованные в архив и выложенные в облако на Я.Диске.

С Уважением, Андрей

Здравствуйте! Пример скрипта можно посмотреть в этом блоге, когда вы прокручиваете страницу вниз, в правом нижнем углу появляется картинка-кнопка "Наверх", нажав на которую вы попадете к верхней шапке сайта.

Под каждым примером с картинкой вы найдете код (скрипт), который надо вставить перед закрывающимся тегом ""


Три небольших момента для корректной установки:

  • Кодировка сайта должна быть в UTF-8 , если будет другая то вместо русских букв - будут непонятные крякозяблики
  • Надо чтобы на сайте была подключена библиотека jquery . Подключить ее можно вставив в шаблоне сайта перед"" следующий код:
  • Если у вас на сайте в дизайне прописан z-index (признак - не видно картинку {или видно, но только на некоторых участках сайта}), вам надо прописать в стилях к сайту следующую строчку: #topcontrol{z-index: 9999;}
  • Если нужно изменть положение картинки то воспользуйтесь стилем margin: #topcontrol{margin-bottom: 50px;}

    • Js">

    Js">

    Js">

    Js">

    Js">

    Js">

    Js">

    Js">

    Js">

    0.js">

    1.js">

    2.js">

    3.js">

    4.js">

    Js">

    6.js">

    7.js">

    8.js">

    9.js">

    0.js">

    1.js">

    2.js">

    3.js">

    4.js">

    5.js">

    6.js">

    7.js">

    Простая кнопка "Наверх" без JavaScript

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

    Для того, чтобы это сделать в любом месте, внизу вашей страницы, просто добавьте следующий код:

    В стили вашего сайта, обычно они находятся в файле style.css надо вставить: .topbutton { width:100px; border:2px solid #ccc; background:#f7f7f7; text-align:center; padding:10px; position:fixed; bottom:50px; right:50px; cursor:pointer; color:#333; font-family:verdana; font-size:12px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; }

    Недостатки:

    Кнопки сделанные с применением JavaScript могут быть плавающими и появляться сразу как только пользователь спустился немного в низ по странице, а в приведенном примере она будет отображаться постоянно.

    Прокрутка не будет плавной и после нажатия пользователь будет мгновенно перенаправлен вверх страницы.

    Плюсы данного вида кнопки:

    Для работы кнопки не нужно задействовать скрипты и большие, по объему, библиотеки. И это очень большой плюс.

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

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

    • Название: Кнопки прокрутки вверх и вниз на JQUERY
    • Ссылка: 57.72 KB
    • Формат: ZIP архив

    В скачанном архиве будут находится все файлы необходимые для функционирования кнопки. Это CSS, JS файлы и файлики изображений стрелок.

    Кнопка плавной прокрутки вверх при помощи JQuery

    Еще один вариант организации плавной прокрутки содержимого страницы, с низу вверх, при помощи JQuery. Кнопка находится в правой нижней части страницы и появляется только если немного проскролить страницу вниз. Все реализовано при помощи небольшого кусочка CSS и JS кода, а так же небольшой картинки использующейся в качестве кнопки.

    Мне эта кнопка нравится тем, что для ее создания не требуется большое количество скриптов при этом она имеет неплохие эффекты.

    Теперь разберемся, что нужно сделать для подключения кнопки к сайту

    Изображение:

    Вам понадобится изображение самой кнопки можете взять любое, а можете использовать вот это:

    HTML код:

    Для вызова кнопки после основного контента страницы или перед тегом разместите следующий HTML код:

    CSS стили:

    Scrollup{ width:40px; height:40px; opacity:0.3; position:fixed; bottom:50px; right:100px; display:none; text-indent:-9999px; background: url("icon_top.png") no-repeat; }

    При помощи этого кода кроме внешнего вида мы определяем позицию кнопки и задаем отступы 100 px с права и 50 px снизу. Его лучше всего добавить в файл стилей вашего сайта.

    Для начала подключаем библиотеку, если она еще не подключена для вашего сайта. Для этого между тегами ...? вставляем следующее:

    Затем сразу после подключения библиотеки необходимо расположить следующий код JQuery:

    Первый ScrollTop - определяет текущее вертикальное положение полосы прокрутки и если оно становится больше 100 px, то автоматически появляется кнопка. Если хотите чтобы она появлялась раньше или позже изменить в необходимую сторону это значение.

    Как вы видите есть еще два параметра - 0 - значит страница будет прокручена вверх до самого начала до нулевого пикселя, а 600 - это скорость анимации в миллисекундах.

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

    Для чего это необходимо

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

    Польза для посетителей

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

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

    Использование кнопки для мгновенного перемещения к верху страницы делает времяпрепровождение на сайте более удобным.

    Польза для интернет-ресурса

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

    Тем самым данные влияют на отношение всех поисковиков к сайту и приводят к улучшению места в поисковой выдаче.

    Как сделать кнопку "вверх" на сайте самостоятельно

    • создание изображения;
    • создание скрипта;
    • создание стиля кнопки;
    • добавление на сайт.
    Изображение кнопки

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

    Чтобы улучшить вид кнопки, необходимо сделать некоторые доработки, а именно сделать спрайт, позволяющий на основе CSS объединить фоновые картинки, тем самым сотворив из них анимацию.

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

    Для начала работы в появившемся окне редактора нужно выбрать поле «Загрузить изображение с компьютера». В качестве примера возьмем изображение ракеты.

    Если габариты выбранной иконки слишком велики, то потребуется сделать небольшую корректировку размеров. Для этого необходимо перейти в верхнее меню и выбрать поле «Редактировать», а после «Free transform…»

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

    Следующее действие - создание копии слоя.

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

    Теперь нужно сделать верхнюю картинку черно-белой. Это можно сделать при помощи пункта «Коррекция» - «Цветовой тон/Насыщенность» в верхнем меню. Для полного обесцвечивания ползунок «Насыщенность» должен принять значение -100. Данное действие позволит сделать эффект, при котором кнопка «Вверх» будет превращаться из черно-белой в цветную при наведении на нее.

    Последний штрих - удаление лишнего пространства вокруг двух картинок. Для этого выбираем пункт «Обрезка» из левого меню и выделяем в прямоугольник лишь две ракеты. Для совершения обрезки нажимается клавиша Enter.

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

    Для сохранения нужно нажать на «Файл» - «Сохранить», где в левом пункте «Мой компьютер» записываем имя изображения (только английская раскладка), выбираем формат (в данном случае - PNG) и нажимаем кнопку «Да».

    Файл со скриптом кнопки «вверх»

    Писать скрипт в данном случае не нужно. Можно будет воспользоваться общедоступным вариантом, внося в готовый код некоторые поправки.

    Для этого потребуется скачать любой редактор кода. Самый популярный и к тому же бесплатный вариант - это Notepad ++. После его установки нужно скопировать и вставить в него весь данный код:

    $(document).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$("#scroller").fadeIn();} else {$("#scroller").fadeOut();}}); $("#scroller").click(function () {$("body,html").animate({scrollTop: 0}, 400); return false;}); });
    Установка на сайт

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

    Создание стиля кнопки в CSS

    Чаще всего кнопка "вверх" для сайта располагается в нижней части («подвале»).

    В файл style.css сайта необходимо внести следующий код:

    В данном случае и понадобятся те данные ширины и высоты изображения. Осталось лишь ввести полученные данные в код, и кнопка "вверх" для сайта будет готова! Что еще?

    Кнопка "вверх" для сайта на Wordpress

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

    Способ с плагинами наиболее удобен и прост в установке, так как для этого потребуется лишь нажать на кнопку установки и настроить весь функционал в меню плагина.

    К выбору последнего стоит подойти с осторожностью, так как вместе с ним можно будет легко приобрести вирус на сайт. Наиболее популярный и проверенный вариант - это плагин под названием Scroll Back To Top. Загрузить его можно при помощи стандартного поиска плагинов Wordpress.

    Данное расширение обладает множественным функционалом, и будет очень просто индивидуализировать кнопку "вверх" для сайта на Wordpress. Все значения изменять совсем не обязательно, потребуется настроить только вид и местоположение кнопки на странице сайта.

    Как видно, установка кнопки «вверх» при помощи плагинов очень проста. Но существует один важный нюанс, заключающийся в том, что каждый установленный плагин нагружает CMS. Это может сказаться на быстродействии интернет-ресурса. Именно поэтому большая часть владельцев сайтов стараются выполнять все изменения непосредственно в коде, а не при помощи сторонних расширений. Можно сделать кнопку "вверх" для сайта на HTML, что максимально сократит потребляемые ресурсы.

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

    Кнока "вверх" для Joomla

    CMS Joomla также поддерживает установку плагинов, как и Wordpress. Наиболее удачным вариантом кнопки "вверх" для сайта на Joomla 3 является расширение под названием Top of the Page.

    В данной CMS любой плагин может быть установлен через «Менеджер расширений». Для этого необходимо:

    • скачать плагин в интернете;
    • нажать на кнопку «Обзор» в менеджере расширений;
    • выбрать скачанный архив;
    • нажать "Загрузить" и установить.

    Теперь необходимо его активировать в «Менеджере плагинов». Для этого необходимо перейти в данный раздел, найти плагин и переключить его состояние на «включено».

    Top of the Page имеет следующий функционал:

    • Run in/ administrator - включение опции не только на интернет-ресурсе, но и в самой панели CMS Joomla.
    • Button Reveal Position - сколько пикселей должен отмотать пользователь для того, чтобы кнопка «вверх» появилась.
    • Omit Button Text - наличие текста на кнопке.
    • Always at Top - страница сайта все время будет отображаться с ее начала. При использовании «якорей» для прокрутки в определенное место на странице данную опцию не нужно активировать.
    • Smooth Scroll - делает прокрутку страницы более плавной.
    • Scroll Duration - время, через которое страница полностью переместится в начало.
    • Scroll Transition - добавляет прокрутке больших визуальных эффектов.
    • Transition Easing - «ослабление» перемещения к верху страницы.
    • Link Location - местоположение иконки. По стандарту, кнопка располагается в правом нижнем углу.
    • Use Styles - индивидуальный стиль кнопки, который можно задать в поле, расположенном ниже. Если переключено на отрицательное значение, то все параметры стилей будут браться из активной темы сайта.
    • Link Style - поле для вписывания своих параметров стиля кнопки.

    Для самостоятельной настройки стиля кнопки «вверх» необходимо обладать хотя бы минимальными знаниями CCS. В противном случае стоит переключить значение предпоследнего параметра на «Нет».

    Еще один важный нюанс заключается в том, что обычная надпись на иконке содержит англоязычный текст: Return to Top. На русскоязычном сайте подобный текст присутствовать не может, поэтому стоит просто отключить его в параметрах плагина либо изменить на русский.

    Для изменения данной надписи необходимо зайти на сервер сайта при помощи FTP или встроенного в хостинге файлового менеджера. Далее в директории «/administrator/language/en-GB/» нужно найти файл под названием «en-GB.plg_system_topofthepage.ini».

    Перед изменением текста стоит изменить кодировку данного документа на UTF-8. Это позволит сделать нормальное отображение русских букв.

    " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Return to Top" "

    и изменяем фразу в кавычках на русскоязычную. Можно использовать такие фразы, как «Вверх!», «В начало!» или «Наверх!».

    Кнопка "вверх" для Ucoz

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

    Для установки нам потребуется:

    • перейти в «Панель управления -> Дизайн -> Управление дизайном (шаблоны) -> Нижняя часть сайта;
    • вставить скрипт (можно найти на официальном сайте проекта и сторонних ресурсах).
    Заключение

    После этого в нижнем правом углу появится иконка, перемещающая пользователя к самому верху страницы.

    Как было видно, установка кнопки «Вверх» для любой из CMS не была особо трудной. Можно использовать как автоматизированный способ установки (плагины), так и ручной. Однако последний вариант остается наиболее подходящим, так как не оказывает негативного влияния на быстродействие сайта.

    Можно использовать кнопку "вверх" для сайта на HTML, чтобы максимально сократить потребление ресурсов сайта, так как большое число расширений может оказать негативное влияние на быстродействие ресурса. Один плагин кнопки "вверх" не сможет сильно повлиять на время загрузки страниц сайта, но в большинстве случаев у пользователя присутствует как минимум десяток плагинов, установленных на CMS. В данном случае любой плагин может негативно повлиять на быстродействие страниц сайта.

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

    В статье будут следующие части:

    Для чего нужна эта кнопка?

    Сказать откровенно, миллионы живут без подобной кнопки. Ничего критичного в её отсутствии нет, но применение этого элемента может принести определенную пользу, как для посетителей, так и для вас, как для владельца ресурса.

    Польза для посетителей

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

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

    Использование стрелки вверх для сайта, позволяет сделать возвращение к верхнему меню быстрым и комфортным.

    Польза для сайта

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

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

    Простая кнопка наверх для сайта html

    Я рассмотрю два способа снабдить ваш сайт такой кнопкой. Первый будет ориентирован на простые сайты, для которых нет возможности или желания подключать какие-либо дополнительные библиотеки или Javascript.

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

    Достоинства:

    • Простота и легкость настройки;
    • Не нужна поддержка библиотек и скриптов.

    Недостатки:

    • Кнопка видна постоянно, даже когда посетитель находится в самом верху страницы;
    • Перемещение вверх происходит не плавно, а мгновенно, рывком.

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

    Следующий код разместите внутри тела сайта (внутри тега body, лучше, прямо перед его закрытием). Обратите внимание, что вам потребуется картинка, которая послужит кнопкой (замените участок кода на ваш путь к картинке и ее название).

    Buttonup { width:88px; height:118px; position:fixed; bottom:20px; right:50px; }

    Этот код отвечает за положение кнопки, редактируя цифры, вы можете его изменить. Как только вы сохраните файл, кнопка начнет действовать. Параметр width ставьте равным ширине картинки, bottom – отступ от нижнего края экрана, right – от правого края экрана.

    Плавающая кнопка наверх для сайта

    Итак, друзья, простую кнопку на HTML мы с вами сделали, теперь давайте займемся реализацией более продвинутой версии. В ней мы избавимся от тех недостатков, которые присутствовали в предыдущем варианте, а именно:

    • Кнопка не будет постоянно маячить перед глазами, а появится только тогда, когда посетитель пролистает страницу вниз;
    • Эффект возвращения наверх страницы будет плавным, что выглядит стильно;
    • Кроме того, наша кнопка будет меняться при наведении курсора (менять цвет или яркость).

    Существует масса способов и скриптов, позволяющих сделать кнопку вверх. Признаюсь честно, я не программист и, если в предыдущем варианте с HTML я разобрался, то в JavaScript я полный чайник. Поэтому я просмотрел и изучил кучу разных версий и выбрал для себя вариант, который проще всего реализовать (меньше изменений в разных файлах).

    В целом, процесс создания такой кнопки чуть-чуть сложнее, но разобраться с ним может каждый. Делается все в 2 этапа:

    1. Подключение библиотеки jQuery

    Если вы используете WordPress или другую стандартную CMS, то эта библиотека, скорее всего, подключена по умолчанию. В таком случае, этот пункт вы можете пропустить.

    Для подключения библиотеки jQuery, вам нужно прописать в разделе вашего сайта следующую строку:

    2. Подключение скрипта, выводящего кнопку

    Код скрипта можно вставить двумя способами:

    • либо поместить его целиком между тегами ,
    • либо разместив скрипт в отдельном фале, а в коде страницы прописать его подключение.

    Первый вариант проще, второй, на мой взгляд, удобнее.

    jQuery(document).ready(function($){ $(""+ "..png) 0 0 no-repeat; }" + ".scrollTop:hover{ background-position:0 -133px;}" +"").appendTo("body"); var speed = 550, $scrollTop = $("").appendTo("body"); $scrollTop.click(function(e){ e.preventDefault(); $("html:not(:animated),body:not(:animated)").animate({ scrollTop: 0}, speed); }); //появление function show_scrollTop(){ ($(window).scrollTop() > 330) ? $scrollTop.fadeIn(700) : $scrollTop.fadeOut(700); } $(window).scroll(function(){ show_scrollTop(); }); show_scrollTop(); });

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

    Я назвал файл buttonup.js. Для его подключения в заголовке сайта прописываем вот такую строчку:

    Вместо «путь к файлу» прописываете адрес, где лежит ваш файл со скриптом.

    Картинка для кнопки

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

    Заданные цифры приведены для картинки размером 88 на 250 пикселей (каждая стрелка сделана по 125 пикселей в высоту). Если вы будете использовать другое изображение, то изменяете в коде значения width и height на свои.

    Значение background-position – это смещение картинки, его делаете чуть больше половины всей высоты изображения.

    Bottom – это отступ от нижнего края экрана. Left – отступ от левого края экрана, здесь он задан в процентах, а можно задать в пикселях, как это было в примере с HTML. Там параметр right (отступ справа) был задан в пикселях.

    Код можно упростить, если удалить из него вот эту строку:

    + ".scrollTop:hover{ background-position:0 -133px;}"

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

    Несколько вариантов стрелок я сделал, а в интернете вы можете отыскать много готовых.

    Как видите, несложно. На этом на сегодня все.



    Примерка © 2024 Решение компьютерных проблем