Да направим най-горното копче на сайт

В този пост, ние ще направим "отгоре", неговата същност - тя ще се появи, когато се превърта надолу сайта и когато щракнете върху него, изпрати на потребителя в началото на текущата страница. Мисля, че много от тях не е необходимо да се обясни, всички ние се срещна подобни бутони "нагоре" на много сайтове.

План за създаване на "Back" бутон

1. Създаване на HTML структура за бутона.
2. Стайлинг нея. Нека това невидимо и поставете десния край на страницата, по отношение на сайта.
3. Напишете скрипт, който ще се появи на бутон за превъртане и лечението на потребителя натискане на бутона "Назад"

Така че с плана за действие за създаването на бутони в горната всички е ясно, да пристъпи към изпълнението му

1. Създаване на HTML структура за бутона "Назад"

бутон код ще постави пред затваряне

2. Стилове за бутона "Нагоре"

Бутон реших да направя фиксирана позиция в долния десен ъгъл. Попитах икона фиксиран размер, да направи цвета на фона и заоблени ъгли.
Също така се създаде стил навъртам за събитието и да направи плавен преход, с помощта на преход собственост.

3. сценария за бутона "Нагоре"

За да започнете да обяви няколко променливи. Първото ограничение - ще има стойност от 1/3 от височината на екрана, и да служи като предпоставка за появата на нашата бутона "Назад".
Второ backToTop - ще накара нашите бутони за избор на JQuery, така че да не се отнасят към него няколко пъти.

Пишем условието за появата и изчезването на нашия бутон. Условието в този случай е да се провери дали потребителят е превъртат трета част на екрана или не.
Ако превъртите, бутона "Up" - ще се появи, ако няма или да се върне на върха, а след това ще изчезне.

Крайният докосване - това се свързват събитието кликване в нашия бутона "Up". Когато натиснете бутона, ние трябва да издържи до върха на текущата страница. Ние правим това с няколко реда код:

Ето целия код изцяло

заключение

Така че ние завърши работата по създаването на бутона "Начало". Това е само една от опциите, които можете да разнообразите с помощта правите редакции към CSS част на този пост.
В демонстрацията статия използва CSS ефекти, описани в този пост ", CSS Animation библиотека"

Здравейте, всъщност би трябвало да работи и така и така
Видът, където имате код сега - не е много лошо, да се възползват елементи от къща в променливите - е добра, но за тях е да се направи името на променливата с $ характер в началото, за да се разграничат JQuery променливи на променливите с прости стойности, като например:

Можете да хвърли своя код, мисля, че няма ...

В моя пример, възможността да се върне:

Да, разбрах, с променливи, благодаря за съветите. Ето една част от кода. JQuery свързан към заглавието (първо, че е края, но се премества нагоре, за да установят причините, поради които не е работа на клик манипулатор)

Допълнителна БАДИ парче, отнасяща се до превъртането.

Var topScroll = $ ( "# превъртане-отгоре");
Var тяло = $ ( "тяло");

topScroll.click (функция () body.animate (1000);
върнете невярна;
>
);

Тук той работи както трябва.
Ако вместо body.animate (1000); обадете се на метода на анимацията, както следва:
$ ( "Body") одушевени (1000) .; тя не работи.
!->