Как подняться вверх страницы. Создаем кнопку «Наверх» или Scroll to Top на jQuery. Полупрозрачная кнопка при помощи JQuery и CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

Для загрузки скрипта можно разместить сам код между тегами или перед закрывающим тегом в файле 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"});; }); });

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

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

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

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

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

JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

Разместить его можно в самом низу сайта, перед закрывающим тегом в файле 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; }

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

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

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

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

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

JavaScript

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

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

Верстайте на заказ и получайте деньги.

*Наведите курсор мыши для приостановки прокрутки.

Назад Вперед

В этом видео мы разберем такой момент, как создание плавной прокрутки страницы вверх при клике по ссылке.

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

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

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

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

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

Демонстрацию работы скрипта и подробный разбор кода смотрите в видео ниже.

Краткий обзор урока (все подробности смотрите в видео):

index.html

1. Первое , что нам нужно - это файл, в котором будет размещена сама ссылка "Наверх". Пусть это будет index.html .

Для того, чтобы все работало, в секции head документа нам нужно подключить файл стилей и два JavaScript-файла (о них - чуть позже):

Сначала подключаем библиотеку jQuery, затем - файл script.js с кодом, который мы пишем сами.

Также в этом файле нам нужно разместить саму ссылку, при клике по которой будет происходить плавный подъем к верхней части страницы:

Наверх

script.js

2. Второе - это файл script.js, в котором мы прописываем функции, выполняющие основные действия:

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

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

Далее мы фиксируем событие прокрутки окна и если прокрутка идет вниз на 700 пикселей и более, то мы плавно отображаем кнопку "Наверх" с помощью метода fadeIn . В противном случае мы ее скрываем методом fadeOut .

Во второй анонимной функции мы отслеживаем событие клика по ссылке внутри блока #back-top и применяем метод animate для плавного подъема к верхней части страницы (scrollTop:0) за 800 мс.

style.css

3. И, третье - это файл стилей. В нашем примере в нем нет ничего лишнего, поэтому стилей мало:

Body { font-size: 13px; line-height: 1.65em; font-family: Verdana, sans-serif; } p { margin-left: 150px; } /* Кнопка наверх */ #back-top{ position:fixed; bottom:10px; left: 0px; } #back-top a{ width:55px; display:block; text-align:center; font:11px/100% Arial, Helvetica, sans-serif; text-transform:uppercase; text-decoration:none; background-color: transparent; -webkit-transition:1s; -moz-transition:1s; transition:1s; } /* графическая стрелка */ #back-top span{ width:55px; height:1600px; display:block; margin-bottom:7px; background: url("../img/up-arrow.png") no-repeat bottom center; -webkit-transition:1s; -moz-transition:1s; transition:1s; } #back-top a:hover span{background-color: rgba(0, 0, 0, 0.3);}

Из того, о чем стоит упомянуть, можно назвать значение fixed для свойства position у блока #back-top . Это позволяет нам зафиксировать положение кнопки относительно окна браузера.

29.06.2014 0 6348

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

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

Наверх

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

#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; }

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

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

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

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

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">

Существует очень простой способ предоставить пользователю такой функционал. Этот способ не требует задействования каких либо библиотек или дополнительных скриптов и делается исключительно при помощи 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
• Ссылка: 57.72 KB
• Формат: ZIP архив

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

Еще один вариант организации плавной прокрутки содержимого страницы, с низу вверх, при помощи 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 - это скорость анимации в миллисекундах.

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

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

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

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

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

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

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

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

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

Шаг 1. Добавляем 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;}); });

Например, для 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;} ..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 стиль, отвечающий за закругление краев блока.

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

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