Поднять кнопку пуска в js наверх страницы. Анимированный переход на верх страницы

При наличии значительного объема контента в материалах сайта веб-мастера используют так называемую "кнопку вверх" (scroll to top). Данная кнопка позволяет моментально пролистать контент к началу страницы, тем самым избавив пользователя от муторной ручной прокрутки.

Работу кнопки "scroll to top" Вы можете лицезреть на данной странице блога .

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

HTML код вывода кнопки

Вставка блока div с идентивикатором arrowup осуществляется между тегами ... исполняемого файла шаблона (обычно это файл index.php). В шаблонах студии Yootheme это файл theme.php, который находится в папке "layouts".

CSS стили оформления кнопки

Код CSS стилей кнопки, который прикреплен к классу arrowup , размещается в любом подключенном к шаблону CSS файле. Обычно используется файл style.css, который размещается в папке "css".

#arrowup { position: fixed; right: 30px; /*позиция кнопки: отступ справа*/ bottom: 30px; /*позиция кнопки: отступ снизу*/ background: url(/images/arrowup.png); /*путь к изображению кнопки*/ width: 48px; /*размер кнопки по ширине*/ height: 48px; /*размер кнопки по высоте*/ cursor: pointer; display: none; opacity: 0.8; /*уровень прозрачности в статике*/ } #arrowup:hover { opacity: 1; /*уровень прозрачности при наведении*/ }

JS код для работы кнопки

JavaScript код, реализующий функционал кнопки, размещается либо между тегами ... исполняемого файла шаблона (index.php), либо перед закрывающим тегом .

$(document).ready(function() { $(window).scroll(function() { if ($(this).scrollTop() > 0) { $("#arrowup").fadeIn(300); //скорость исчезновения кнопки } else { $("#arrowup").fadeOut(200); //скорость появления кнопки } }); $("#arrowup").click(function() { $("body,html").animate({ scrollTop: 0 }, 200); //скорость прокрутки return false; });});

Как скрыть "кнопку вверх" на мобильных устройствах

Многие веб-мастера скрывают "кнопку вверх" при отображении сайта на мобильных устройствах из-за её ненадобности. Для скрытия кнопки "scroll to top" в мобильных устройствах используется css медиа запрос @media (прописывается все в том же css файле style.css):

@media only screen and (max-width: 568px) { #arrowup {display: none;} }

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

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

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

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

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

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

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

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

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

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

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

Простая кнопка наверх для сайта 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;}"

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

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

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

Привет, друзья. Сегодня я продолжаю делиться с вами полезными скриптами, а если говорить конкретно, то я расскажу вам историю о появлении на моем блоге кнопки вверх . Меня уже давно просили написать, как сделать такую же кнопочку, но мне было жалко «палить контору», но сегодня я вдруг передумал…

Так-то ничего нового я не расскажу, ведь в сети можно найти еще 100500 статей о том, как сделать кнопку вверх для сайта, на этом бы и стоило закончить сегодняшний пост, если бы не одно НО! Моя кнопка необычная, не такая как у всех – у меня кнопка от самого Яндекса…сейчас-сейчас я все расскажу:)

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

Кнопку или сам скрипт я даже не искал, все это само попалось мне на глаза – на одном из сервисов Яндекса, увы, не помню на каком. Но раздумывать я не стал – раз дают надо брать!

Мне очень нравится выражение «Хорошие художники копируют, а гениальные — воруют», но вот я хоть и не художник, но ворую гениально:) Да, кнопку, которую вы видите на моем блоге, я спер с Яндекса. Я не хотел пользоваться чьими-то инструкциями и скриптами, они все какие-то стремные, а тут раз уж сам Яндекс пользуется данным скриптом, значит он лучший.

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

15 минут колупаний исходного кода и все исходники у меня! Но я вас избавлю от этого безобразия, с моей инструкцией вы сможете всего за 2 минуты заиметь красивую и работающую кнопочку!

Установка кнопки «вверх» на любой сайт

Действительно, добавить данный скрипт можно без проблем на любой сайт или любую CMS, да что там – хоть на чистый html хоумпейдж. Самое главное и единственное условие – у вас должна быть подключена jQuery библиотека.

Оригиналов исходного кода Яндекса я не сохранил, так как при добавлении на блог я сразу менял некоторые стили и настройки. Но поверьте, в процессе интеграции все стало только лучше!
Итак, приступим к установке:

Шаг 1. Добавляем JavaScript в шаблон сайта, перед закрывающим тегом

< script type= "text/javascript" > $(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 ; } ) ; } ) ;

$(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;}); });

Например, для WordPress надо будет редактировать файл шаблона header.php, а в DLE необходимо будет добавлять код в шаблон main.tpl.

Шаг 2. Добавляем html-код в шаблон сайта перед закрывающим тегом

наверх

наверх

Опять же, в WordPres надо редактировать файл footer.php, а для DLE снова main.tpl.

Шаг 3. Добавляем CSS-стили блока и кнопки вверх в файл style.css (название файла style.css у вас может быть и другим, но это не важно, добавьте код в любой файл стилей, который подключается к сайту) .

.b-top { z-index : 2600 ; position : fixed ; left : 0 ; bottom : 90px ; width : 34% ; margin-left : 50% ; opacity : 0.5 ; filter : alpha(opacity= 50 ) ; } .b-top : hover { opacity : 1 ; filter : alpha(opacity= 100 ) ; cursor : pointer ; } .b-top-but { z-index : 2600 ; position : absolute ; display : block ; left : 56px ; bottom : 0 ; margin : 0 0 0 100% ; padding : 32px 12px 4px ; color : white ; background : #D8D5C2 url (https://сайт/wp-content/plugins/goupbutt/b-j-top.png ) no-repeat 50% 11px ; border-radius : 7px ; }

B-top {z-index:2600;position:fixed;left:0;bottom:90px;width:34%;margin-left:50%;opacity: 0.5;filter:alpha(opacity=50);} .b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;} ..png) no-repeat 50% 11px;border-radius:7px;}

Как видите, я даже url фоновой картинки со стрелкой не стал менять, оставил подгрузку с яндексовских серверов. На Яндексе пропала картинка, указал путь к картинке на своем сервере, а вам рекомендую ее сохранить к себе, будет надежнее.

Что тут можно настроить и изменить под себя:

• bottom:90px; – смещение блока с кнопкой относительно низа страницы;
• width:34%;margin-left:50%; — вот с этими параметрами вам придется поколдовать, т.к. четкой инструкции тут быть не может. Данные значения я выявил экспериментально, проверяя положение кнопки на разных разрешениях экрана именно для моего шаблона на блоге. Чего и вам рекомендую;
• padding:32px 12px 4px; — с помощью этих значений вы можете регулировать размер блока с кнопкой, управляя отступами относительно надписи «вверх». 32px – отступ сверху, 12px – отступы слева и справа, 4px – отступ снизу;
• color:white; — цвет надписи «вверх»;
• border-radius:7px; — это css3 стиль, отвечающий за закругление краев блока.

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

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

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

Вернуться наверх

Наш код будет состоять из двух частей, стилей CSS и маленького скрипта jQuery. Давайте начнем с CSS.

CSS стили для кнопки

Мы начнем с создания стилей и разметки для нашей кнопки. Вот часть HTML:

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

< a id = "button" >

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

Начальные стили для кнопки будут выглядеть так:

#button { display: inline-block; background-color: #FF9800; width: 50px; height: 50px; text-align: center; border-radius: 4px; margin: 30px; position: fixed; bottom: 30px; right: 30px; transition: background-color .3s; z-index: 1000; } #button:hover { cursor: pointer; background-color: #333; } #button:active { background-color: #555; }

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

Давайте сделаем квадратную кнопку 50х50 px с закругленными углами в 4px. Мы придадим ей ярко-оранжевый цвет и по 30px с каждой стороны. Фиксированная позиция всегда позволяет нашей кнопке оставаться в том же месте, когда мы прокручиваем страницу, а z-index очень большого значения, что кнопка всегда перекрывает другие элементы веб-сайта. Когда мы наводим курсор на кнопку, курсор меняется на указатель, а фон становится темно-серым. Чтобы сделать переход плавным, мы назначим переход на 0,3 секунды для свойства background-color . Также, когда мы нажимаем кнопку, цвет фона также изменяется и становится немного светлее.

Добавляем иконку

Сейчас наша кнопка пустая, давайте добавим на неё иконку. Мы делаем это, добавляя ::after псевдо=элемент типа этого:

#button::after { content: "\f077"; font-family: FontAwesome; font-weight: normal; font-style: normal; font-size: 2em; line-height: 50px; color: #fff; }

Мы собираемся выбрать значок из самой популярной библиотеки шрифтов FontAwesome . Начнем с иконкой Chevron Up .

Чтобы отобразить её в псевдоэлементе, установите значение FontAwesome для тега font-family и назначьте значение Unicode для вашего значка в content .

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

Добавляем функциональность с jQuery

В этом подразделе мы поговорим о том, как собственно сделать кнопку рабочей. Самый простой способ это сделать - использовать JavaScript библиотеку jQuery. Для начала нам нужно добавить jQuery в HTML разметку. Добавьте эту строку прямо перед тем как закрыть тег body.

< script src =" https: // cdnjs . cloudflare . com / ajax / libs / jquery /3.1.1/ jquery . min . js" >

Сейчас мы можем написать наш скрипт используя синтаксис jQuery. Добавьте этот скрипт после строки jQuery:

jQuery(document).ready(function() { var btn = $("#button"); $(window).scroll(function() { if ($(window).scrollTop() > }); btn.on("click", function(e) { e.preventDefault(); $("html, body").animate({scrollTop:0}, "300"); }); });

Давайте поближе посмотрим на этот скрипт. Вы, наверно, заметили первую строку кода:

jQuery(document ).ready(function () {

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

Появление и исчезновение кнопки

Вот код, который отвечает за эту функцию:

Var btn = $("#button"); $(window).scroll(function() { if ($(window).scrollTop() > 300) { btn.addClass("show"); } else { btn.removeClass("show"); } });

Сначала мы объявляем переменную btn и назначаем ей ID button , так что нам будет легче обратиться к нему позже в коде. Также это помогает JavaScript быстрее выполнять вычисления. Как только мы сохраним элемент в переменной, JavaScript не будет нуждаться в поиске по всей странице много раз, когда нам нужно будет использовать ее снова в нашем коде.

В jQuery есть удобная функция .scroll() .

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

$ (window ). scroll (function () {

Внутри функции мы постелили утверждение if/else:

If ($(window).scrollTop() > 300) { btn.addClass("show"); } else { btn.removeClass("show"); }

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

Чтобы получить текущую позицию полосы прокрутки, мы собираемся использовать встроенный метод jQuery .scrollTop() . Он просто возвращает несколько пикселей, которые скрыты над прокручиваемой областью.

Таким образом, каждый раз, когда мы прокручиваем страницу, JavaScript проверяет, сколько пикселей скрыто, и сравнивает их с числом. В нашем случае это количество до 300, но вы можете изменить его, если хотите.

Если мы пройдем 300px, то мы добавим класс show к нашей кнопке, который заставит её появиться. Если число меньше 300, мы удаляем этот класс. Добавление и удаление классов является еще одной причиной популярности jQuery. Мы можем сделать это с помощью двух простых методов addClass() и removeClass() . Однако у нас пока нет класса show в нашем CSS, поэтому добавим его:

If ($(window).scrollTop() > 300) { btn.addClass("show"); } else { btn.removeClass("show"); }

По умолчанию ваша кнопка будет скрыта, поэтому нам нужно добавить еще несколько правил в элемент #button :

#button { transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0; visibility: hidden; }

Чтобы сделать переход плавным, давайте добавим еще два значения в атрибут перехода, непрозрачность и видимость, установленные на 0,5 секунды.

Подъём наверх

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

Btn.on("click", function(e) { e.preventDefault(); $("html, body").animate({scrollTop:0}, "300"); });

Первый метод jQuery, который мы видим здесь это on() . Его первым параметром является «click» JavaScript-событие, которое происходит каждый раз, когда мы кликаем мышей в нашем браузере. Второй параметр - это функция обработки, которая запускается, как только происходит событие.

Функция обработки принимает параметр события. Мы можем назвать все, что захотим, но обычно предпочтительнее e или event . Нам нужен параметр события, чтобы передать его функции и использовать для метода preventDefault() .

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

Метод jQuery .animate() - это тот, который выполняет весь трюк.

$("html, body").animate({scrollTop:0}, "300");

Первый параметр метода .animate() - это список свойств, которые мы должны анимировать. Наше свойство называется scrollTop , и мы хотим, чтобы оно имело значение 0 . Тип этого параметра является простым объектом, поэтому нам нужно использовать фигурные скобки и записывать наши значения, используя синтаксис парой ключ / значение.

Второй параметр - это скорость, с которой мы хотим, чтобы наша анимация запускалась. Он измеряется в миллисекундах, и чем выше число, тем медленнее анимация. Значение по умолчанию - 400, но изменим его на 300.

Наконец, мы применяем метод animate к HTML и элементам body на нашей странице.

Теперь каждый раз, когда мы нажимаем кнопку, это возвращает нас в начало страницы.

Демо

Финальную версию вы можете посмотреть в демо CodePen . Я также добавила примеры текста для демонстрации.

Посмотрите на код кнопки «Наверх» Мэтью Кейна (@matthewcain ) на CodePen .

Завершение

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

Был рассмотрен способ плавного перемещения (скроллинга) по ссылкам на странице сайта. Частный вариант такого скроллинга - кнопка возврата в начало страницы .

Обычно кнопку возврата в начало страницы размещают в правом нижнем углу экрана и делают фиксированной, чтобы в любой момент можно было вернуться назад. Для этого достаточно задать положение кнопки следующими правилами CSS:
position:fixed; /*Расположение кнопки на странице: внизу справа с отступами 10рх*/
top:auto;
bottom:10px;
left:auto;
right:10px;

Для особо ленивых товарищей удобно вместо картинки кнопки использовать символы Юникода, оформив их с помощью правил CSS. О том, как выбрать подходящий символ-значок, рассказано в статье "Символы Юникода - полезные значки для сайта ". Например, используя значок с кодом ⇑ , можно получить следующую кнопку:

Оформление кнопки сделано с помощью следующих правил CSS:
border-radius:5px;
background-color:#ddd;
padding:8px 20px;
font-size:24px;
color:#333;
text-align:center;

Описанный способ имеет один недостаток: кнопка возврата наверх выводится постоянно. Чтобы она появлялась только при движении вниз по странице, можно использовать немного измененный скрипт - плагин jQuery liScrollToTop .

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

Установка плагина liScrollToTop

Как обычно, при установке плагинов jQuery сначала создадим на сайте новую папку, назвав её, конечно же, scrolltotop . Затем скачиваем архив и распаковываем его в созданную папку. Мы получим в ней два скрипта jquery-1.8.3.min.js, jquery.liScrollToTop.js и таблицу стилей liScrollToTop.css .

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




$(function(){
$(".scrollUp").liScrollToTop();
});

Картинку кнопки возврата размещаем в любом месте страницы (удобнее в конце) в теге DIV: