Скрипт наверх страницы jquery. Вертикальный скроллинг страницы средствами jQuery и кроссбраузерность

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

Подготовка

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

CSS стили кнопки «Наверх»

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

JavaScript код кнопки «Наверх»

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

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

Доработки Scroll To Top

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

В завершение

Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по душе.

Вариант на JavaScript

Код скрипта:

var t; function up() { var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop); if(top > 0) { window.scrollBy(0,-100); t = setTimeout("up()",20); } else clearTimeout(t); return false; }

Число -100 — это количество пикселей, которое прокручивается вверх через каждые 0,02 секунды (число 20).

наверх

Вариант на jQuery

Код скрипта:

(function($) { $(function() { $("#up").click(function() { $("html, body").animate({scrollTop: 0},500); return false; }) }) })(jQuery)

Число 500 — это время, в течение которого происходит анимация (прокрутка), в данном случае это полсекунды.

В подходящее место html-кода страницы необходимо добавить такую ссылку:

наверх

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

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

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

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

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

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

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

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

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

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

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

Назад Вперед

Плавная прокрутка страницы вверх на jQuery

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

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

Можно реализовать эту возможность исключительно средствами 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 . Это позволяет нам зафиксировать положение кнопки относительно окна браузера.

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

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

Кнопка наверх: HTML+CSS

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

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

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

Кнопка наверх: JavaScript

Приведенный ниже способ использует библиотеку 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-стилей (размер, цвет, обводка, прозрачность и т.д.). Таким образом, этот способ является более гибким и предоставляет больше возможностей при добавлении кнопки "Наверх" на сайт.

29.06.2014 0 6348

Многие из Вас видели, что на некоторых сайтах при прокрутке окна браузера, в какой-то момент появляется кнопка "Наверх". Если по ней кликнуть, то начинается плавная перемотка полосы прокрутки до самого верха. Как реализовать плавную кнопку "Наверх" через 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.

 

Возможно, будет полезно почитать: