Здравейте. За дълго време, ние не разполагаме с някои комунални услуги до JQuery. Днес, сценарият се превъртете до JQuery. Необходимо е да се почти всеки сайт, както и използване на трета страна плъг-ин с планини от ненужни код - не е много желателно.
Ако самия сайт не създава тема от голям интерес за вас, тогава да ви окажат помощ ключът към професионалистите - идеалното решение.
Как да си направим скрипт превъртете нагоре с JQuery
Да започнем с един прост, HTML:
Това е кодът на самия бутон, за да се добави в HTML.
Нека да преминем към CSS, описват стила на един бутон, което го прави статични в долния десен ъгъл, прозрачни, с сянка, кръгли и да мишката става по-видима.
Както можете да видите, за да не се добавя символ стрела в HTML, и по този начин се опрости структурата, ние го добавя чрез CSS. В допълнение, CSS сме описали за всички бутони - тя е кръгла, с една сянка, е фиксиран в долния десен ъгъл, висене става все по-забележими.
С CSS завършена. Сега нека да се справят с JQuery. От JQuery ние зависи от 2 неща:
- определение бутон дисплей "нагоре" или не (в зависимост от степента на превъртане на страницата)
- действителните гладко скролиране на страниците нагоре с натискането на един бутон
Първо, ние възложи манипулатор събитие на свитъка на страницата, и го направи в проверка: ако страницата се превърта повече от размера на екрана, вече е възможно да се покаже бутона "нагоре", ако страницата се превърта по-малко - напротив скрие.
След това добавете манипулатор кликване събитие за нашия бутона "нагоре". В него ние анимирате scrollTop собственост, както в HTML и тялото (за различни браузъри).
Съставено бутони в горната част - работи.
Виж резултат тогава може:
Първоначално, бутонът се не се вижда, имате нужда от малко poskrolit площ, за да визуализирате (за зареждане на манипулатор и да се провери).
Можете спокойно да инсталирате кода на сайта и ще бъдете приятно изненадани, че тя работи и не изисква допълнителни плъгини и скриптове. Само няколко реда код в JS, СГО и само една линия на HTML (между другото, без HTML също е възможно да се управляват и използват JS само, това е, за да добавите бутон, след зареждането на страницата).
Целият код на статията е достъпно на jsfiddle.
Свързани статии