Как подняться на страницы вверх в html. Анимированный переход на верх страницы. UItoTop 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 не поддерживается в том или ином браузере.

Ах, как быстро привыкает человек к удобству, независимо, где он находится: дома или на сайте! Не знаю как вы, но я привык пользоваться кнопкой «Наверх» , а особенно это удобно, когда статья больших размеров.
Итак, в этой статье я расскажу, как сделать кнопку «Наверх» для сайта , используя библиотеку jQuery.

1. Подключим библиотеку jQuery. Кстати, об этом я писал недавно .
Добавьте между тегами … вот этот код:

2. Добавляем между тегами саму кнопку-ссылку «Наверх»:

наверх наверх

и сразу после кнопки «Наверх» добавьте код JavaScript:

$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) $("a#move_up").fadeIn(); else $("a#move_up").fadeOut(400); }); $("a#move_up").click(function(){ $("body,html").animate({scrollTop: 0}, 450); return false; }); });

Обратите внимание на строку №6 , там есть цифра 100 – она указывает, через какое количество слов должна появляться кнопка «Наверх». Вы можете указать любую другую подходящую для вас цифру.
В строке №11 есть цифра 450 – указывает скорость подъема страницы. Вы можете тоже указать свою цифру. Чем выше цифра, тем медленнее страница поднимается наверх, чем меньше цифра, тем быстрее страница окажется наверху.

3. Теперь добавьте код CSS. Кто не знает, как подключить CSS к HTML файлу, почитайте об этом тут.

A#move_up { position:fixed; /* фиксированное положение блока*/ top:8px; right:20px; width:56px; height:20px; display:none; text-align:center; font:12px Arial,Verdana,sans-serif; color:#fff; background:#3366ff; padding-top:5px; /*прозрачность*/ opacity:0.7; filter:alpha(opacity=70); border-radius: 2px; text-decoration:none; } a#move_up:hover { opacity:0.9; filter: alpha(opacity=90); }

Вот это и все. Вот так выглядит полностью готовый код:

a#move_up{ position:fixed; /* фиксированное положение блока*/ top:8px; right:20px; width:56px; height:20px; display:none; text-align:center; font:12px Arial,Verdana,sans-serif; color:#fff; background:#3366ff; padding-top:5px; /*прозрачность*/ opacity:0.7; filter:alpha(opacity=70); border-radius: 2px; text-decoration:none;} a#move_up:hover{ opacity:0.9; filter: alpha(opacity=90);} Ваш текст (желательно больше текста) наверх $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) $("a#move_up").fadeIn(); else $("a#move_up").fadeOut(400); }); $("a#move_up").click(function(){ $("body,html").animate({scrollTop: 0}, 50); return false; }); });

Теперь при прокрутке страницы вниз будет появляться небольшой синий полупрозрачный блок с надписью «Наверх».

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

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

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

В этом уроке, мы узнаем, как создать свою 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

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

В завершение

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

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

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

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