Js прокрутка страницы вверх. Плавная прокрутка страницы вверх на jQuery. Кнопка вверх, как Вконтакте

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

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

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

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

Код 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; /*уровень прозрачности при наведении*/ }

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

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.

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

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

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

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

В этом уроке, мы узнаем, как создать свою Scroll to Top кнопку для длинных страниц. Способ реализации очень прост. Если вы его усвоите, вы сможете настроить кнопку Scroll to Top так, как вам захочется. Преимущество в том, что данная кнопка реализована на популярном фреймверке jQuery, который используется практически на каждом сайте.

Для начала, нам понадобиться картинка кнопки наверх. Для этого можете скачать любую стрелочку или нарисовать сами. Сохраните ее под именем arrow. png . Как вы уже догадались, эта картинка и будет нашей кнопкой наверх.

В header страницы или в отдельном css файле, установим css стили для div блока с id=scroller.

#scroller{ position: fixed; /** позиция кнопки scroll to top **/ bottom: 30px; /** картинка кнопки наверх**/ background: transparent url(arrow.png) no-repeat left top; width: 32px; height: 32px; cursor: pointer; /** скрываем кнопку в начале **/ display:none; }

Как видите, прежде всего мы установили фиксированную позицию блока, вы можете поменять размещение кнопки scroll to top с помощью значения bottom. Далее мы устанавливаем фоном нашу стрелочку, которую подготовили на первом этапе. В конце, скрываем кнопку, чтобы ее не было видно, когда страница только загружена.

Как и полагается, мы напишем код скрипта кнопки в секции header.

Для начала подключим библиотеку jQuery, для этого воспользуемся Google CDN. Хотя вы можете подключить из официального сайта jQuery, Microsoft или из своего сервера. Я использую Google CDN, по моему мнению, он работает наиболее быстро.

Создаем JavaScript функцию после загрузки библиотеки jQuery.

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

В первой части функции, мы устанавливаем событие на scroll событие. Когда происходит скроллинг окна значение переменной scrollTop более 0, в это время мы выводим кнопку «Наверх», когда скроллинг не происходит, мы ее прячем.

Во второй части функции, мы цепляем обработчик события click на кнопку scroll to top (наверх), когда она нажата, мы анимируем скроллинг к тегу body. То есть происходит скроллинг в начало страницы.

На этом создание базового кода кнопки «Наверх » завершено!

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

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

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

Преимущество данного способа - простота в использовании (не нужно использовать дополнительные библиотеки или скрипты).

Кнопка наверх с помощью CSS - "Нубекс" .topNubex { position: fixed; right: 45px; bottom: 45px; } Вверх

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

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

Кнопка "Вверх" при помощи JavaScript - "Нубекс" #topNubex { position: fixed; right: 45px; bottom: 45px; } $(function() { $(window).scroll(function() { if($(this).scrollTop() != 0) { $("#topNubex").fadeIn(); } else { $("#topNubex").fadeOut(); } }); $("#topNubex").click(function() { $("body,html").animate({scrollTop:0},700); }); });

В этом примере в качестве фона кнопки используется картинка. Можно настроить отображение кнопки при помощи CSS-стилей (размер, цвет, обводка, прозрачность и т.д.). Таким образом, этот способ является более гибким и предоставляет больше возможностей при добавлении кнопки "Наверх" на сайт.