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

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

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

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

$(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:

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");

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

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

и здесь:

$("#toTop").scrollToTop();

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

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

Строка №2

if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);

В этой строке задаётся условие.

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

Строка№3

$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}

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

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

Читайте так же:  Отдельная страница для тэгов WordPress сайта: лист меток

Строка№4

else{$(scrollDiv).fadeIn("slow")}});

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

Строка№5

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

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

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

Игорь Серов, специально для сайта «Как сделать сайт WordPress».

Другие статьи раздела: CMS WordPress


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

Добавить комментарий