Бутони и плавно превъртане нагоре и надолу на страницата.
В тази статия е проста и много елегантен пример за "Up" и "Down", без използването на изображения и малка версия на сценария JQuery за плавно превъртане на страниците по определената посока.
Методът е добре, защото първоначално, когато страницата е издигната, "Нагоре" бутон е скрит, когато превъртели до дъното - "Надолу" бутона скрит, параметрите на височината, на която има коригирани един бутон.
DEMO
По този начин, HTML кода му, изглежда така:
За изпълнение посока показалеца свитък - стрели, които се използват за специални знаци Unicode, които са просто копират и вмъкват вътре в тага. Този подход се избягва използването на изображения, добавяне на плюс за оптимизация, както и позволявайки ви лесно да се създаде и, ако е необходимо, бързо да промените външния вид на бутони.
което трябва да направите две проверки с помощта на стандартни специални символи в елементи от дизайна на сайта:
1) Проверете кодирането на уеб страницата - да бъде UTF-8;
2) Проверка на символ на съвместимостта на различни браузъри - се появява, ако във всички браузъри, е, че не съществува;
HTML-код мястото, където ви е удобно в шаблона, външния вид и разположението на бутоните, определени в CSS (стил кода на страницата, демо):
отидат нагоре. отидете надолу дисплей: няма;
позиции: фиксиран; / * Позициониране * /
Z-индекс: 9999; / * По време на всички елементи на страницата * /
Точно така: 15%; / * Позиция на страницата, ако бъде оставен - ляво * /
фон: # 4F4F4F;
граница: 1px твърдо #ccc;
граничен радиус: 5px;
курсора: указател;
Цвят: #fff;
текст-приравни: център;
шрифт: нормален нормална 42px / 42px безсерифен;
текстови сянка: 0 1 пиксел 2px # 000;
непрозрачност. 5;
подложка: 3px;
марж-отдолу: 5px;
ширина: 42px;
височина: 42px;
>
.отидете нагоре
.отидете надолу
.отидете надолу: мишката,
.отидете-нагоре: мишката непрозрачност: 1;
кутия сянка: 0 5px 0.5em -1px # 666;
>
Поради ще бъде разположен на фиксираната позиционирането на бутоните, така да се каже, винаги под ръка, а сега остава само да се добави JQuery скрипт, който е клика плавно ще се превърта страницата нагоре или надолу:
$ (Функция (), ако ($ (прозорец) .scrollTop ()> = "250") $ ( "# ToTop") .fadeIn ( "бавно")
$ (Window) .scroll (функция (), ако ($ (прозорец) .scrollTop ()<="250") $("#ToTop ").fadeOut("slow")
друг $ ( "# ToTop") .fadeIn ( "бавно")
>);
ако ($ (прозорец) .scrollTop ()<=$(document).height()-"999") $("#OnBottom ").fadeIn("slow")
$ (Window) .scroll (функция (), ако ($ (прозорец) .scrollTop ()> = $ (документ) .height () - "999") $ ( "# OnBottom") .fadeOut ( "бавно")
друг $ ( "# OnBottom") .fadeIn ( "бавно")
>);
Стойността в сценария 250, показва:
- на първия ред - бутона ще се появи, когато страницата е превъртат над 250 пиксела;
- второ, че изчезват, когато горната част на страницата, за да останат по-малко от 250 пиксела.
По това, докато всички, благодаря на всички ви за вниманието.
Той При стандартен образец, zhikveri, никой не е свързан, е необходимо да се свържете. Изпуснах момента, тъй като Мисля, че няма нужда да казвам, но сега мисля, че е необходимо да се актуализира на статията, и добавите елемента. Благодарим Ви за корекцията.
Аз не знам как да се представят, и аз имам един компютър в училище е по-проучихме основно, линията проследено чрез формулите, и в очите на мишки не виждам)) Ето защо, обучение по компютърна грамотност себе си, включително и факта, че в продължение на блога. Така че, стрелката е несъмнено удобно. Но наистина не се нуждаят от тях, когато знаеш, че една малка трик (открит случайно, тече навсякъде)
Ако натиснете мишката за превъртане колело от всяка точка на текста (с изключение на изображенията и връзки), няма да има "нещо" в кръг, а когато движите мишката нагоре или надолу, а понякога и в част на страницата се пренавива. В зависимост от това колко далеч от центъра ще се скоростта на курсора се увеличава или намалява. Очевидно предимство на този прост метод е, че можете да се спрете на всяко място и по всяко време. И стрели само до върха или на дъното.
Но, разбира се сте готови за споделяне като важна и полезна информация за вас благодаря.
Какво искаш да кажеш! Няма нужда да се извиняваме, всичко правилно сте забелязали, но от личен опит мога да кажа едно нещо, че "прости" хора не се нуждаят от информация, от която се нуждаят крайния резултат: Copy - Paste - радвайте се. Но този метод има много недостатъци, в който аз просто спрях да пиша тези постове и монотонен дублиращо се съдържание, че мрежата е вече "над 99999999999" отговори, тъй като ако не беше популярна.
Кой е свързан JQuery, и тя е свързана с вече трябва навсякъде. По дяволите, как да се формулира обща чрез добавяне на JQuery спре да работи Лайтбокс JQuery без добавяне на работех сам превъртете аз се отказах този страхотен превъртам скриптове не го правят благотворителен базар. И той започва да се тества и други възможности да се възползват морски обекти и ме ядоса, че това е грешка на превъртане работи, и като се използва същият JQuery и това е готино там. На случаен принцип и танци с дайре заменя всички долара $ дума за JQuery и всичко работи и Лайтбокс и превъртете, за да добавите допълнителна библиотека не е необходимо
все още бих посъветвал JQ скриптове, настанени в типа на строителство:
(Функция ($) $ (Функция () // тук един голям SCRIPT JQuery
>)
>) (JQuery);
Що се отнася до втория, размишлявах.
Може би това е така, но аз не съм обиск. Но нека да кажем, JQuery Лесно тапа, която на теория би трябвало да се реши този проблем, той не е решен, а само помогна промените кода, описан по-горе. Основни произведения :)