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

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

Наш код будет состоять из двух частей, стилей 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, даже если вы не веб-разработчик. Надеюсь, что пост был вам полезен и у вас непременно получится сделать такую кнопку!

Здравствуйте, уважаемые посетители!

Я продолжаю публиковать статьи технической тематики.

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

Нужна ли

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

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

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

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

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

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

Кнопка вверх, как Вконтакте

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

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

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

Чтобы реализовать его, нужно всего лишь разместить скрипт на сайте.

Для загрузки скрипта можно разместить сам код между тегами или перед закрывающим тегом в файле footer.php. А можно просто загрузить файл со скриптом на хостинг, а затем просто сделать загрузку файла на сайте.

Если вы хотите разместить скрипт и не мучиться с загрузкой, то даю вам сам код скрипта.

JavaScript

$(document).ready(function() { $("body").append("^ Наверх"); $ (window).scroll (function () { if ($ (this).scrollTop () > 300) { $ (".button-up").fadeIn(); } else { $ (".button-up").fadeOut(); } }); $(".button-up").click(function(){ $("body,html").animate({ scrollTop: 0 }, 100); return false; }); $(".button-up").hover(function() { $(this).animate({ "opacity":"1", }).css({"background-color":"#E1E7ED","color":"#45688E"}); }, function(){ $(this).animate({ "opacity":"0.7" }).css({"background":"none","color":"#45688E"});; }); });

$ (document ) . ready (function () { $ ("body" ) . append ("^ Наверх" ) ; $ (window ) . scroll (function () { if ($ (this ) . scrollTop () > 300 ) { $ (".button-up" ) . fadeIn () ; } else { $ (".button-up" ) . fadeOut () ; } ) ; $ (".button-up" ) . click (function () { $ ("body,html" ) . animate ({ scrollTop : 0 } , 100 ) ; return false ; } ) ; $ (".button-up" ) . hover (function () { $ (this ) . animate ({ "opacity" : "1" , } ) . css ({ "background-color" : "#E1E7ED" , "color" : "#45688E" } ) ; } , function () { $ (this ) . animate ({ "opacity" : "0.7" } ) . css ({ "background" : "none" , "color" : "#45688E" } ) ; ; } ) ; } ) ;

В данном коде можно изменить некоторые параметры под себя.

• Строка 4 отвечает за вывод самой области для прокрутки страницы. В ней прописаны основные стили для отображения кнопки. в принципе, данные параметры должны подойти практически каждому. Но может потребоваться и отредактировать их под себя;
• В строке 7 в скобках имеется число 300, которое отвечает за момент появления кнопки. То есть, кнопка будет появляться только после прокрутки 300 пикселей вниз. Рекомендую тут подобрать такое значение, чтобы прокрутка была возможной только тогда, когда с поля зрения пропадает основное меню сайта или какие-то другие важные элементы в навигации;
• В строке 17 значение 100 отвечает за скорость прокрутки. Чем меньше значение, тем быстрее возвращение вверх страницы.

Данный код можно разместить между тегами в верхушке сайта. Если сайт на WordPress то данная область находится в файле шаблона header.php. Также можно разместить перед закрывающим тегом в самом низу сайта (файл footer.php). Последний вариант я и рекомендую, так как он позволит ускорить загрузку сайта. Выглядеть будет это так.

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

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

JavaScript

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

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

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

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

Второй способ кнопки наверх от Вконтакте

По данному способу я записал подробный видео-урок.

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

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

Состоит из 3х этапов:

Размещение скрипта на сайте;

Размещение кода, отвечающего за вывод кнопки;

Оформление с помощью CSS стилей.

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

Можно пойти 2мя путями, как и в первом случае. Либо разместить сам скрипт в нужной области (см. пункт выше) либо же сделать загрузку скрипта через файл. Далее мы будем делать все именно через второй способ, чтобы было эффективно.

Файл скрипта скачайте по кнопке ниже.

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

⇓ Назад ⇑ Наверх

< div class = "leftbar-wrap" > < a href = "#0" id = "scroll-back" > < span class = "active-area" > < span class = "bar-desc-niz" > ⇓Назад< / span > < / span > < / a > < a href = "#" class = "left-controlbar" > < span class = "active-area" > < span class = "bar-desc-top" > ⇑Наверх< / span > < / span > < / a >

Разместить его можно в самом низу сайта, перед закрывающим тегом в файле footer.php.

Затем прописываем стили оформления в свой файл стилей (style.css) и загружаем все измененные файлы на хостинг. Вот сами стили.

/* описание контейнера */ .leftbar-wrap { position: fixed; height: 100%; top: 0; width: 99px !important; left: 0; } /* описание кнопки «Вверх» */ .left-controlbar { height: 100%; display: block; text-decoration: none; } /* описание кнопки «Вернуться» */ #scroll-back { display: block; height: 100%; top: 0; display: none; text-align: center; } /* описание столбца фонового цвета для обеих кнопок */ .active-area { width: 100px; height: 100%; display: block; text-align: center; } /* задаем прозрачность фонового цвета при наведении на активную область страницы */ .leftbar-wrap:hover .active-area { background: #E1E7ED !important; opacity:0.7 !important; } /* делаем подсветку немного ярче при наведении на надпись */ .leftbar-wrap .active-area:hover { } /* центрируем надпись у кнопок */ .bar-desc-niz { top: 26% !important; position: relative; display: inline-block; } .bar-desc-top { top: 10% !important; position: relative; display: inline-block; }

/* описание контейнера */ Leftbar-wrap { position : fixed ; height : 100% ; top : 0 ; width : 99px !important ; left : 0 ; /* описание кнопки «Вверх» */ Left-controlbar { height : 100% ; display : block ; text-decoration : none ; /* описание кнопки «Вернуться» */ #scroll-back { display : block ; height : 100% ; top : 0 ; display : none ; text-align : center ; /* описание столбца фонового цвета для обеих кнопок */ Active-area { width : 100px ; height : 100% ; display : block ; text-align : center ; /* задаем прозрачность фонового цвета при наведении на активную область страницы */ Leftbar-wrap:hover .active-area { background : #E1E7ED !important ; opacity : 0.7 !important ; /* делаем подсветку немного ярче при наведении на надпись */ Leftbar-wrap .active-area:hover { /* центрируем надпись у кнопок */ Bar-desc-niz { top : 26% !important ; position : relative ; display : inline-block ; Bar-desc-top { top : 10% !important ; position : relative ; display : inline-block ;

В зависимости от дизайна и структуры вашего ресурса, потребуется немного изменить некоторые параметры в данных стилях. Например, в строках 47 и 53 изменить параметр отступа слова "Назад" и "Наверх" от самого верха страницы соответственно

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

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

Третий способ кнопки наверх без плагина

Реализация кнопки также очень простая и 100% работает на сайте WordPress. По поводу HTML сайта или другого движка сказать не могу. Тестируйте.

Нужно скопировать следующий код со скриптом в самый низ сайта перед закрывающим тегом /

JavaScript

$(document).ready(function(){ $("#back-top").hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $("#back-top").fadeIn(); } else { $("#back-top").fadeOut(); } }); $("#back-top a").click(function () { $("body,html").animate({ scrollTop: 0 }, 400); return false; }); }); });

< p id = "back-top" > < a href = "#top" > < span > < / span > < / a > < / p >

29.06.2014 0 7049

Многие из Вас видели, что на некоторых сайтах при прокрутке окна браузера, в какой-то момент появляется кнопка "Наверх". Если по ней кликнуть, то начинается плавная перемотка полосы прокрутки до самого верха. Как реализовать плавную кнопку "Наверх" через jQuery, Вы и узнаете из этой статьи.

HTML

Для начала создадим в html нашу кнопку.

Наверх

CSS

Добавим стили к нашей кнопки

#button-up { display:none; left: 0; margin: 0; position: fixed; bottom: 50px; outline:none; width: 52px; color: #333333; line-height: 30px; text-decoration: none; padding: 0px 0 0 28px; background: url(../images/icon-arrow-black-up.jpg) no-repeat 7px 11px #ffffff; border-radius: 0 4px 4px 0; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; -o-border-radius: 0 4px 4px 0; box-shadow: 0 2px 4px #999; -webkit-box-shadow: 0 2px 4px #999; -moz-box-shadow: 0 2px 4px #999; -o-box-shadow: 0 2px 4px #999; cursor:pointer; }

Javascript и jQuery

Далее создадим функцию которая будет при скролинге страницы показывать или скрывать нашу кнопку. Также сделаем чтобы кнопка не сразу появлялась, а при отступе сверху 50px. Если расстояние до верха меньше 50 px то будем скрывать кнопку. Для того чтобы при нажатии на кнопку, прокрутка в начало страницы была плавной мы добавили функцию animate.

$(document).ready(function(){ /** * При прокрутке страницы, показываем или срываем кнопку */ $(window).scroll(function () { // Если отступ сверху больше 50px то показываем кнопку "Наверх" if ($(this).scrollTop() > 50) { $("#button-up").fadeIn(); } else { $("#button-up").fadeOut(); } }); /** При нажатии на кнопку мы перемещаемся к началу страницы */ $("#button-up").click(function () { $("body,html").animate({ scrollTop: 0 }, 500); return false; }); });

Вот и все, кнопка готова к использованию. Также вначале не забудьте подключить фреймворк jQuery.

По многочисленным просьбам я написал урок по созданию перехода на верх страницы, как на сайте Web Designer Wall . Это очень просто сделать с помощью jQuery (каких-то пару строчек кода). Необходимо сравнить значение позиции верхней полосы прокрутки с определенным значением, и если первое из них больше, отобразить кнопку перехода на верх. Как только пользователь кликает по кнопке, производится переход на верх страницы.

$(document).ready(function(){ // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $("#back-top").fadeIn(); } else { $("#back-top").fadeOut(); } }); // scroll body to 0px on click $("#back-top a").click(function () { $("body,html").animate({ scrollTop: 0 }, 800); return false; }); }); });

А что, если JavaScipt не поддерживается?

Заметьте, что кнопка перехода на верх ссылается на якорь #top, который является идентификатором тега body. В принципе, нет необходимости задавать какую-либо ссылку-якорь, так как jQuery позволяет прокручивать на любую часть страницы. Тем не менее лучше её все-таки задать на случай, если JavaScript не поддерживается в том или ином браузере.

Кнопка "Наверх" для сайта стала появляться у многих на сайтах и блогах с 2010 годов. Является ли эта кнопка полезной и пользуются ли ей пользователи? Пользуются, но мало. Поэтому эту кнопку обычно добавляют где-нибудь с краю сайта (справа внизу чаще всего).

Реализации кнопки наверх три. Естественно каждый из них можно еще поделить на какие-то тонкости, но базовых идей три. Мы рассмотрим каждую из них и дадим каждому свою оценку.

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

Начну с самого лучшего способа (сложность реализации - средне).

1. На основе JavaScript и AJAX (JQuery)

На этом сайте реализован как раз ниже описанный пример.

В этом способе мы должны получить отличную кнопку, со следующими характеристиками:

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

Если делать все по инструкции, то проблем с созданием кнопки возникнуть не должно. Итак, инструкция по шагам:

A. Создание js-файла
Откройте любой блокнот (я рекомендую Notepad++) вставьте код ниже и сохраните его с расширением.js (например, gototop.js ):

(function() { function gotoTop(fast, time) { fast = fast || 0.1; time = time || 12; var dx = 0; var dy = 0; var bx = 0; var by = 0; var wx = 0; var wy = 0; if (document.documentElement) { dx = document.documentElement.scrollLeft || 0; dy = document.documentElement.scrollTop || 0; } if (document.body) { bx = document.body.scrollLeft || 0; by = document.body.scrollTop || 0; } var wx = window.scrollX || 0; var wy = window.scrollY || 0; var x = Math.max(wx, Math.max(bx, dx)); var y = Math.max(wy, Math.max(by, dy)); var speed = 1 + fast; window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); if(x > 0 || y > 0) { var invokeFunction = "top.gotoTop(" + fast + ", " + time + ")" window.setTimeout(invokeFunction, time); } return false; } function scrollTop(){ var a = document.getElementById("gotoTop"); if(! a){ // если нет элемента добавляем его var a = document.createElement("a"); a.id = "gotoTop"; a.className = "scrollTop"; a.href = "#"; a.style.display = "none"; a.style.position = "fixed"; a.style.zIndex = "9999"; a.onclick = function(e){ e.preventDefault(); window.top.gotoTop(); } document.body.appendChild(a); } var stop = (document.body.scrollTop || document.documentElement.scrollTop); if(stop > 550){ a.style.display = "block"; smoothopaque(a, "show", 30); } else { smoothopaque(a, "hide", 30, function(){a.style.display = "none";}); } return false; } //функция прозрачности function smoothopaque(el, todo, speed, endFunc){ var tartop = Math.round(el.style.opacity * 100), op = startop; if(todo == "show") endop = 100; else endop = 0; clearTimeout(window["top"].timeout); window["top"].timeout = setTimeout(slowopacity, 33); function slowopacity(){ if(startop < endop){ op += 7; if(op < endop) window["top"].timeout = setTimeout(slowopacity, speed); else (endFunc) && endFunc(); } else { op -= 7; if(op > endop){ window["top"].timeout = setTimeout(slowopacity, speed); } else (endFunc) && endFunc(); } setopacity(el, op); } } function setopacity(el, opacity){ el.style.opacity = (opacity/100); el.style.filter = "alpha(opacity=" + opacity + ")"; } if (window.addEventListener){ window.addEventListener("scroll", scrollTop, false); window.addEventListener("load", scrollTop, false); } else if (window.attachEvent){ window.attachEvent("onscroll", scrollTop); window.attachEvent("onload", scrollTop); } window["top"].gotoTop = gotoTop; })();

B. Настройка стиля
Добавьте в файл стилей следующий код (файл стилей, это файл с расширением.css). Чаще всего его имя main.css или style.css:

#gotoTop { position : fixed ; bottom : 60px ; width : 56px ; height : 96px ; margin-left : 1170px ; background : url(top.png ) no-repeat 0px 0px ; } #gotoTop:hover { background : url(top.png ) no-repeat -56px 0px ; }

Вместо top.png нужно прописать полный или относительный адрес своей картинки. Вместо 0px 0px и -56px 0px нужно прописать свои смещения. Либо же не использовать смещения, а просто воспользоваться другой картинкой при нажатии.

C. Подключение скриптов к сайту
В приведенном примере мы использовали технологию AJAX, поэтому необходимо подключить библиотеку jquery. Также нужно подключить созданный вами файл gototop.js в первом пункте:

... ...

А в самом низу сайта (перед тегом body) добавить строчку:

Все файлы, которые необходимы для этого я собрал в архиве: gototop.rar

2. Кнопка без применения AJAX

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

2.1. С применением якоря ссылки

Вверху сайта для какого-нибудь элемента прописываем id . Логично было бы прописать его для заголовка , потому что это начало контента. А внизу можно разместить ссылку на якорь. Код примерно такой:

... Заголовок статьи ... ... .totop { position : fixed ; bottom : 40px ; right : 20px ; background : none ; cursor : pointer ; }

Минусы этого способа существенные:

• Кнопка наверх будет всегда на виду, даже если пользователь и так вверху
• Необходимо прописывать якорь. Это может быть не всегда удобно
• Переход наверх получается резким (нет плавного движения)

Преимущество одно: не нужно использовать скриптов.

2.2. С применением JavaScript

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

... $(function() { $("#gotoTop").scrollToTop(); }); ...

Стиль можно прописать такой же, как и в примере 2.1.

Я считаю, что лучше все же использовать способ 1, поскольку он обладает более приятным визуальным эффектом для пользователей, что является очень важным в век