Как работает скрипт для кнопки «Наверх»

Скрипт для кнопки Наверх нужен для работы кнопки прокрутки страницы в ее начало — наверх.

Скрипт для кнопки Наверх

Скрипт для кнопки Наверх нужен для работы кнопки прокрутки страницы в ее начало — наверх. Обычно кнопку наверх или в начало вы можете видеть внизу страницы в виде стрелки или надписи. Прокрутка наверх осуществляется работой скриптом Javascript, работу которого разберем в этой статье построчно.

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

Скрипт для кнопки «Наверх» задает условия работу кнопки. Кнопка «Наверх» будет появляться при начале прокрутки вниз, и исчезать при нахождении вверху страницы.

php; gutter: true">$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");
if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);
$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}
else{$(scrollDiv).fadeIn("slow")}});
$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});

Разберем скрипт для кнопки «Наверх» построчно

Строка №1:

php; gutter: true">$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");

fn.scrollToTop – задаёт уникальное название скрипту. Это название ,«ToTop», можно заменить на любое свое. При этом нужно поменять названия скрипта здесь:

<a href="#" id="toTop">

и здесь:

php; gutter: true">$("#toTop").scrollToTop();

.removeAttr(«href») – Это оператор removeAttr. Он производит возвращение в первоначальное положение, при условии указанном в скобках. В нашем скрипте это условие нажатие на ссылку:

html; gutter: true"><a href="#" id="toTop">
<img src="Ссылка на картинку" border="0" align="absmiddle" />
</a>

Строка №2

php; gutter: true">if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);

В этой строке задаётся условие.
При условии, что начинается прокрутка окна (не равна 0), то выполняется определенное условие.
Если значение условия становиться True, то выполняется функция указанная в фигурных скобках «{}».
А в скобках стоит .fadeIn и указывает , что объект(картинка) появляется плавно, значение «slow».
Иначе: Скрипт начинает работать, когда окно сайта начинает прокручиваться. При этом картинка появляется плавно.

Строка№3

php; gutter: true">$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}

Это еще одно условие.

Это условие нужно для того, чтобы картинка не только появлялась при прокручивании окна вниз, но и пропадала при возвращении наверх страницы.
Условие в этой строке: При условии,что координаты окна после прокручивания по всем параметрам равны 0, то объект (картинка) исчезает.
За исчезание отвечает оператор .fadeOut.Параметр «slow» указывает, что объект (картинка) исчезает плавно.

Строка№4

php; gutter: true">else{$(scrollDiv).fadeIn("slow")}});

Здесь задается поведение скрипта,если координаты не равны 0, то есть просматривается не верх страницы.

Строка№5

php; gutter: true">$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});

.click это функция, которая выполняется при нажатии на объект(картинку) (тот же самый «href»)

.animate при нажатии на объект выполняется анимация, в скобках «()» указана какая анимация . Значение scrollTop:0 означает ,что прокручивание страницы вверх.
Параметры html и body.показывают, что прокручиваться будет именно эта страница. Параметр «slow» указывает, чтобы страница прокручивалась плавно.

©www.wordpress-abc.ru

Еще статьи

• Как создать идеальный сайт для бизнеса
• 7 важных элементов качественного веб дизайна сайта
• Версия 4.6 WordPress, «Перец»
• Footer WordPress: Как удалить виджеты в футере WordPress
• WordPress как платформа для дистанционного обучения (LMS)