Три от най-добрите начини да се правят превъртането страница нагоре
Три от най-добрите начини да се правят превъртането страница нагоре
А именно: описание на това как да се направи бутона "Up" и преминете към изпълнение на една проста уеб страница само чрез HTML и CSS. както и най-доброто решение за плавно превъртане на страници с помощта JQuery. И разбира се, инструкции как да го прилагат.
Да започнем с един прост.
Бутони и превъртете страницата нагоре през HTML и CSS.
Всичко е много просто - този бутон се осъществява с помощта на така наречените "котва". следвайте тези стъпки:
Най-горе на страницата, кодът веднага след
Къде ID - позоваване на идентификатор.
Сега трябва да се постави на самия бутон връзката когато се натисне превъртате страницата, за да котвата ще се случи. Неговата структура може да бъде поместен на удобно място, като позицията на бутона се определя от CSS. Кодът е, както следва:
И за да го дам на дизайна на бутона ще добави CSS. той ще бъде като този:
a.idTop позиции: фиксиран; / * * Fixed позициониране на бутоните /
Z-индекс: 9999; / * Се показва на върха на всички елементи * /
надолу: 0%; / * Позиция на дъното * /
дясно: 0%; / * Правилната позиция * /
фон: # 7db9e8; / * Фон, можете да посочите всяко изображение * /
непрозрачност. 6; / * Прозрачен * /
Цвят: #fff; / * Цвят на текста * /
подложка: 10px; / * Padding * /
марж: 5px 15px 15px 5px; / * Външно уплътнение * /
>
a.idTop: мишката непрозрачност: 1;
>
Или можете да използвате готов образ на един бутон със стрелка нагоре или нещо, това е като всеки друг. Тогава кода за бутона изглежда така:
JQuery скрипт непрекъснато да превъртате нагоре страницата
Тази опция не е много различен от предишния пример, в HTML, но тя има за цел да опрости прилагането на две неща в бърза превъртане - да се отърве от поставянето на котва и да превъртате по-гладка страница. Начин за изпълнение на това:
- Свържете всяка версия на JQuery. по-добре, разбира се издържи.
- След това добавете скрипт на сайта е показано по-долу:
- Поставете в блока шаблон със селектор .backtotop - бутон елемент с връзки.
- Зададохме желания изглед чрез CSS за него. Можете да от предишния пример, с изключение, че тук, например, да направи версия със снимка:
a.idTop позиции: фиксиран;
Z-индекс: 9999;
надолу: 0%;
дясно: 0%;
фон: URL ( "/yuor_image_64x64.jpg.") не-повторение;
височина: 64px;
ширина: 64px;
непрозрачност. 6;
цвят: прозрачен;
подложка: 10px;
марж: 5px 15px 15px 5px;
>
a.idTop: мишката непрозрачност: 1;
>
Плюсове - лесен скрипт работа красота, минуси - малки функционални и практични, и това не е нещо. Не винаги е необходимо, за да превъртите страницата на вашия сайт, само нагоре, понякога искате да даде на потребителя възможност да се върнете към сайта кликнете върху бутона или в долната част на страницата.
JQuery плъгин уеб страници превъртете нагоре
Като цяло, като цяло, направо добавка, наречена скърцането някак си не наистина се превръща поради много малкия си размер. Но в същото време, тя има всички необходими функции. Този скрипт:
- гладко превърта нагоре;
- превъртане бутон не се вижда в горната част на страницата, и се появява като част от вече превъртели и изчезва, когато се върнете към върха;
- Той е с малки размери и работи във всички браузъри.
По този начин, HTML код за бутона:
#toTop позиции: фиксиран;
Z-индекс: 9999;
надолу: 10px;
дясно: 10px;
фон: # F4FFBF;
граница: 1px твърдо #ccc;
подложка: 5px;
курсора: указател;
цвят: # 666;
текстови декорация: няма;
ширина: 100px;
>
#toTop позиции: фиксиран;
Z-индекс: 9999;
надолу: 10px;
дясно: 10px;
фон: URL ( "/yuor_image_64x64.png.") не-повторение;
ширина: 64px;
височина: 64px;
граница: няма;
подложка: 5px;
курсора: указател;
цвят: прозрачен;
текстови декорация: няма;
>
И всъщност, поставя себе си JQuery плъгин, както обикновено, преди затварянето
Ето три прости решения, които да направят красив и удобен бутон страница превъртане.