Мазмұны көп сайттарда (мысалы, блогтар) жай ғана «Басына оралу» түймесін пайдалану керек. Өйткені, ұзақ мақаланы оқыған пайдаланушы сайтты шарлауды жалғастыру үшін беттің жоғарғы жағына оралуы керек болуы мүмкін. Немесе келуші мақаланы толық оқымас бұрын, мақаланы оқуға тұрарлық па, жоқ па деп алдын ала баға беру үшін оны басынан аяғына дейін айналдырып, айдарларды, суреттерді, диаграммаларды қарап шығады. Әдетте, мұндай жағдайларда, «Жоғарғы» түймесі болмаған кезде, келуші жай ғана тінтуірдің дөңгелегі немесе айналдыру (браузердің бүйір жағында) арқылы парақты жоғары жылжытады.

Сондықтан сайтты шарлауды жеңілдету үшін бетті айналдыру түймесі пайдаланылады. Мұндай түймені JavaScript қолданбай (тек CSS көмегімен) немесе онымен жасауға болады. Осы әдістердің ең қарапайым іске асырылуын қарастырайық.

Жоғарғы түйме: HTML+CSS

Артықшылық бұл әдіс- пайдаланудың қарапайымдылығы (қосымша кітапханаларды немесе сценарийлерді пайдаланудың қажеті жоқ).

CSS бар жоғарғы түйме - "Nubex" .topNubex ( орны: бекітілген; оң жақта: 45px; төменгі: 45px; ) Жоғарғы

Бұл әдістің кемшіліктері мынада: бұл жағдайда айналдыру біркелкі болмайды және кіруші бірден беттің жоғарғы жағына қайта бағытталады.

Жоғарыдағы түйме: JavaScript

Төмендегі әдіс JQuery кітапханасын пайдаланады. Оны пайдалану оңай және бетті тегіс айналдыруға мүмкіндік береді.

Жоғары түймесі қашан JavaScript анықтамасы- "Nubex" #topNubex ( орны: бекітілген; оң жақта: 45 пиксель; төменгі жағында: 45 пиксель; ) $(функция() ( $(терезе).scroll(функция() ( if($(бұл).scrollTop() != 0 ) ( $("#topNubex").fadeIn(); ) else ( $("#topNubex").fadeOut(); ) ) $("#topNubex").click(function() ( $("); body,html").animate((scrollTop:0),700); )); ));

Бұл мысал суретті түйменің фоны ретінде пайдаланады. Түйменің дисплейін конфигурациялауға болады CSS анықтамасы-стильдер (өлшем, түс, штрих, мөлдірлік және т.б.). Осылайша, бұл әдіс неғұрлым икемді және сайтыңызға «Басына оралу» түймесін қосқанда көбірек опцияларды ұсынады.

Сәлем достар. Бүгін мен сіздермен пайдалы сценарийлермен бөлісуді жалғастырамын, нақтырақ айтсам, блогымда жоғары түйменің пайда болуы туралы оқиғаны айтып беремін. Баяғы түймені қалай жасауға болатынын жазуды көптен сұрады, бірақ «кабинетті өртеп жібергеніме» жаным ашиды, бірақ бүгін кенет ойымнан қайттым...

Жарайды, мен сізге жаңа ештеңе айтпай-ақ қояйын, өйткені интернетте веб-сайттың артқы жағына түймені қалай жасауға болатыны туралы тағы 100 500 мақала табуға болады, бұл бір болмаса, бүгінгі жазбаның соңы болар еді. БІРАҚ! Менің түймем ерекше, басқалар сияқты емес - менде Яндекстің өз түймесі бар ... қазір, қазір мен бәрін айтамын :)

Әйтеуір, бастапқыда блог жүргізу кезінде посттардағы пікірлерді парақтап бөлуден бас тартуды жөн көрдім. Неге екенін білмеймін, мүмкін қосымша парақшалар ашқым келмеді, әлде бір постқа 50-ден астам пікір қалдыратыныма сенбедім, әйтеуір, мен өз пікірімді өзгерткен жоқпын. қазір - жазбалардағы барлық пікірлер бір бетте көрсетіледі. Дегенмен, сәтсіздікке ұшырадым, менің блогымдағы кейбір хабарламалар қазірдің өзінде 500-ден астам пікір алды, және бұл мен оларды айына бір рет тазалайтыныма қарамастан. Қысқасы, бұл фон болды - және нәтиже блогқа жоғары түймені қосуға тура келді. Нәтижесінде, пікірлері бар ұзын жазбаларды шарлау әлдеқайда оңай.

Мен түймені де, сценарийдің өзін де іздемедім, бәрі менің көзіме түсті - Яндекс қызметтерінің бірінде, өкінішке орай, қайсысы есімде жоқ. Бірақ мен бұл туралы екі рет ойламадым - егер олар берсе, сіз оны алуыңыз керек!

Маған «Жақсы суретшілер көшіреді, бірақ тамаша суретшілер ұрлайды» деген сөзді ұнатамын, бірақ мен суретші болмасам да, мен керемет ұрлаймын :) Иә, менің блогымда көріп тұрған түйме Яндекстен ұрланған. Мен басқа біреудің нұсқаулары мен сценарийлерін пайдаланғым келмеді, олардың бәрі ақымақ, бірақ Яндекстің өзі бұл сценарийді қолданатындықтан, бұл оның ең жақсы екенін білдіреді.

Ескертпе: бұл менің Яндекстен «қарыз алғаным» емес, бір ай бұрын мен жарнамалық беттердің бірінде «құпия» бөлісу түймелерін таптым, ол туралы .

15 минут қазу бастапқы коджәне менде барлық дереккөздер бар! Бірақ мен сізді бұл тәртіпсіздіктен құтқарамын, менің нұсқауларыммен сіз 2 минут ішінде әдемі және жұмыс істейтін түймеге ие бола аласыз!

Кез келген веб-сайтта «жоғарыға оралу» түймесін орнату

Шынында да, сіз бұл сценарийді кез келген веб-сайтқа немесе кез келген CMS-ке еш қиындықсыз, тіпті таза html басты бетіне қоса аласыз. Ең маңызды және жалғыз шарт - jQuery кітапханасы қосылған болуы керек.

Мен Яндекстің бастапқы кодын сақтамадым, өйткені мен оны блогқа қосқанда, мен кейбір стильдер мен параметрлерді бірден өзгерттім. Маған сеніңіз, интеграция процесі кезінде бәрі жақсарды!
Сонымен, орнатуды бастайық:

1-қадам. Жабу тегіне дейін сайт үлгісіне JavaScript қосыңыз

< script type= "text/javascript" >$(құжат) .ready (функция () ( $(терезе) .scroll (функция () ( егер ($(бұл ) .scrollTop () > 0 ) ( $("#scroller" ) .fadeIn () ; ) басқа ( $("#scroller" ) .fadeOut () ; ) ) ; $("#scroller" ) .click (функция () ( $("body,html") .animate (( scrollTop: 0 ) , 400 ); қайтару false );

$(құжат).ready(функция())( $(терезе).scroll(функция () (егер ($(бұл).scrollTop() > 0) ($("#scroller").fadeIn();) else ($("#scroller").fadeOut();))); $("#scroller").click(функция () ($("body,html").animate((scrollTop: 0), 400 ); қайтару жалған;));

Мысалы, WordPress үшін header.php үлгі файлын өңдеу керек, ал DLE жүйесінде main.tpl үлгісіне код қосу керек.

2-қадам. Жабу тегіне дейін сайт үлгісіне HTML кодын қосыңыз

жоғары

жоғары

Тағы да, WordPres бағдарламасында footer.php файлын, ал DLE үшін main.tpl файлын өңдеу керек.

3-қадам. Блок үшін CSS мәнерлерін қосыңыз және style.css файлына дейін түймені басыңыз (style.css файлыңыздың атауы әртүрлі болуы мүмкін, бірақ маңызды емес, кодты сайтқа қосылатын кез келген стиль файлына қосыңыз).

.b-жоғарғы ( z-индекс : 2600 ; орын : бекітілген ; сол : 0 ; төменгі : 90px ; ені : 34% ; жиегі-сол : 50% ; мөлдірлік : 0,5 ; сүзгі : альфа(мөлдірлік = 50 ) ;) b-жоғарғы : меңзерді жылжыту ( мөлдірлік : 1 ; сүзгі : альфа(мөлдірлік = 100 ) ; курсор : көрсеткіш ; ) .b-жоғарғы-бірақ (z-индекс : 2600 ; орын : абсолютті ; дисплей : блок ; сол : 56px ; төменгі : 0 0 100% толтыру : 32px 12px 4px : #D8D5C2 url (https://site/wp-content/plugins/goupbutt/b-j-top.png) 50%; шекара радиусы: 7px)

B-жоғарғы (z-индекс:2600;орын:бекітілген;сол:0;төменгі:90px;ені:34%;маржа-сол:50%;мөлдірлік: 0,5;сүзгі:альфа(мөлдірлік=50);) .b -жоғары: меңзерді жылжыту (мөлдірлік: 1; сүзгі: альфа(мөлдірлік = 100); курсор: көрсеткіш;) ..png) қайталанбайды 50% 11px; шекара радиусы: 7px;)

Көріп отырғаныңыздай, мен тіпті URL мекенжайын да жіберемін фондық суретМен көрсеткіні өзгерткен жоқпын, Яндекс серверлерінен жүктеуді қалдырдым. Сурет Яндекс-те жоғалып кетті, мен серверде суретке жолды көрсеттім, мен оны өзіңізге сақтауды ұсынамын, ол сенімдірек болады.

Мұнда өзіңіз үшін нені теңшеуге және өзгертуге болады:

• төменгі: 90px; – беттің төменгі жағына қатысты түймесі бар блоктың ығысуы;
• ені:34%;жегі-сол жақ:50%; - сіз бұл параметрлермен шатастыруыңыз керек, өйткені... Мұнда нақты нұсқаулар болуы мүмкін емес. Мен бұл мәндерді эксперименталды түрде таптым, блогтағы шаблон үшін әртүрлі экран ажыратымдылығындағы түйменің орнын тексердім. Мен сізге осыны ұсынамын;
• толтыру:32px 12px 4px; — осы мәндерді пайдалана отырып, «жоғары» жазуына қатысты шегінісін басқара отырып, түйменің көмегімен блоктың өлшемін реттеуге болады. 32px – үстіңгі толтыру, 12px – сол және оң жақ толтыру, 4px – төменгі толтыру;
• түсі: ақ; — «жоғары» жазуының түсі;
• шекара радиусы: 7px; - бұл блоктың шеттерін дөңгелектеуге жауапты css3 стилі.

Барлығы дайын, мен ештеңе ұмытқан жоқпын деп үміттенемін. Өте қарапайым және өте ұзын беттері бар сайттар үшін пайдалы.

Назарларыңызға рахмет, достар. Сценарийді пайдаланыңыз, түсініктемелерде сұрақтар қойыңыз, ұсыныстарыңыз бен тілектеріңізді жазыңыз.

Сәлем! Сценарий үлгісін осы блогта бетті төмен айналдырған кезде көруге болады, Төменгі оң жақ бұрышта «Басына оралу» сурет түймесі пайда болады, оны басу сізді сайттың жоғарғы тақырыбына апарады.

Суреті бар әрбір мысалдың астында сіз «» жабу тегіне дейін енгізілуі керек кодты (скрипт) табасыз.

Дұрыс орнату үшін үш шағын нүкте:

Сайттың кодталуы UTF-8 болуы керек, егер ол басқаша болса, онда орыс әріптерінің орнына түсініксіз кланкерлер болады.

Сайтта jQuery кітапханасы болуы керек. Оны келесі кодты сайт үлгісіне «» алдында енгізу арқылы қосуға болады:

Егер сіздің веб-сайтыңыздың дизайнында z-индексі болса (суреттің көрінбейтіндігінің белгісі (немесе сайттың кейбір аймақтарында ғана көрінетін)), веб-сайт мәнерлеріне келесі жолды қосу керек: #topcontrol( z-индекс: 9999;)

Кескіннің орнын өзгерту қажет болса, маржа мәнерін пайдаланыңыз: #topcontrol(маржа-төменгі: 50px;)

Js">

Js">

Js">

Js">

Js">

Js">

Js">

Js">

Js">

0.js">

1.js">

2.js">

3.js">

4.js">

Js">

6.js">

7.js">

8.js">

9.js">

0.js">

1.js">

2.js">

3.js">

4.js">

5.js">

6.js">

7.js">

JavaScript жоқ қарапайым "Басына оралу" түймесі

Пайдаланушыға осындай функционалдылықты қамтамасыз етудің өте қарапайым жолы бар. Бұл әдіс ешқандай кітапханаларды немесе қосымша сценарийлерді пайдалануды қажет етпейді және тек осы әдіспен орындалады HTML анықтамасыжәне қажет болса, CSS көмегімен кәдімгі ішкі сілтеме жасау арқылы.

Мұны беттің төменгі жағындағы кез келген жерде орындау үшін келесі кодты қосыңыз:

Сайтыңыздың стильдерінде әдетте style.css файлында орналасады, сізге мыналарды енгізу керек: .topbutton (ені:100px; жиек:2px қатты #ccc; background:#f7f7f7; text-align:center; padding: 10px позициясы: 50px;

Кемшіліктері:

JavaScript көмегімен жасалған түймелер қалқымалы болуы мүмкін және пайдаланушы бетті сәл төмен жылжытқанда бірден пайда болады, бірақ жоғарыдағы мысалда ол үнемі көрсетіледі.

Айналдыру тегіс болмайды және басқаннан кейін пайдаланушы бірден беттің жоғарғы жағына қайта бағытталады.

Бұл түйме түрінің артықшылықтары:

Түймені басқару үшін сценарийлерді немесе үлкен кітапханаларды пайдаланудың қажеті жоқ. Және бұл өте үлкен плюс.

JQUERY жүйесінде жоғары және төмен жылжытыңыз

Бұл шешім бетті төмен және жоғары жылжытуға мүмкіндік береді, себебі ол екі түймеден тұрады. Түймешіктер беттің сол жағында тұрақты орналасқан. Айналдыру кезінде түймелер біркелкі жыпылықтайды.

• Тақырып: JQUERY жүйесінде жоғары және төмен жылжу түймелері
• Сілтеме: 57,72 KB
• Пішім: ZIP мұрағаты

Жүктелген мұрағатта түйменің жұмыс істеуі үшін қажетті барлық файлдар болады. Бұл CSS, JS файлдары және көрсеткі кескін файлдары.

JQuery көмегімен бірқалыпты жоғары жылжыту түймесі

JQuery көмегімен төменнен жоғарыға бет мазмұнын тегіс айналдыруды ұйымдастырудың тағы бір нұсқасы. Түйме беттің төменгі оң жағында орналасқан және бетті сәл төмен айналдырсаңыз ғана пайда болады. Барлығы CSS және JS кодының кішкене бөлігі, сондай-ақ түйме ретінде пайдаланылатын кішкентай кескін арқылы жүзеге асырылады.

Маған бұл түйме ұнайды, себебі ол қажет емес үлкен сансценарийлер және оның жақсы әсерлері бар.

Енді түймені сайтқа қосу үшін не істеу керектігін анықтайық

Сурет:

Сізге түйменің суреті қажет, кез келгенін алуға болады немесе мынаны пайдалануға болады:

HTML коды:

Негізгі бет мазмұнынан кейін немесе тегтің алдында түймені шақыру үшін келесі HTML кодын орналастырыңыз:

CSS стильдері:

Айналдыру(ені:40px; биіктік:40px; мөлдірлік:0,3; орын: бекітілген; төменгі: 50px; оң жақта: 100px; дисплей: жоқ; мәтін шегінісі: -9999px; фондық: url("icon_top.png") қайталанбайды ;)

Бұл кодты пайдаланып, сыртқы түріне қосымша, біз түйменің орнын анықтаймыз және толтыруды оң жақтан 100 пиксельге және төменнен 50 пиксельге орнатамыз. Оны сайттың стильдер кестесіне қосқан дұрыс.

Біріншіден, кітапхана сіздің сайтыңызға қосылмаған болса, оны қосамыз. Осы мақсатта тегтер арасында...? келесіні енгізіңіз:

Содан кейін, кітапхананы қосқаннан кейін бірден келесі JQuery кодын орналастыру керек:

Бірінші ScrollTop - айналдыру жолағының ағымдағы тік орнын анықтайды және ол 100 пиксельден жоғары болса, түйме автоматты түрде пайда болады. Оның ертерек немесе кейінірек пайда болуын қаласаңыз, бұл мәнді қажетінше өзгертіңіз.

Көріп отырғаныңыздай, тағы екі параметр бар - 0 - бұл бет нөлдік пиксельге дейін ең басына дейін жылжиды, ал 600 - бұл миллисекундтағы анимация жылдамдығы.

Сайттың жоғары түймесі - 7-ден астам дәлелденген шешім - 72 дауыс негізінде 5-тен 4,6

«Жоғарыға оралу» түймесі пайдаланушы тәжірибесін жақсартуда үлкен рөл атқарады, әсіресе мазмұнға толы беттерде. Мазмұн қазіргі уақытта сайт үшін ең маңызды нәрсе болғандықтан, ол әдетте беттерде көбірек және көбірек болады ең жақсы жолКелушіні беттің жоғарғы жағына бағыттау үшін әртүрлі арнайы түймелер бар, біз осы мақалада сіздің сайтыңыздың жоғарғы жағына түймені қалай жасауға болатынын қарастырамыз.

Бұл түйме не үшін және қандай жағдайларда оны қолданған дұрыс?

Сайт бетінде мазмұнның үлкен көлемі болған кезде, пайдаланушы оны оқып, бетті белгілі бір нүктеге немесе ең төменгі жағына айналдырып, беттің жоғарғы жағында орналасқан навигация сілтемелерін көру үшін жиі жоғары қарай жылжи бастайды. және/немесе кейбір әрекеттерді орындаңыз.

Пайдаланушыларға ыңғайлылық қосу және жалпы сайтыңыздың ыңғайлылығын жақсарту үшін пайдаланушы автоматты түрде беттің жоғарғы жағына қайта бағытталатын сайт үшін жоғары түймені пайдаланған дұрыс.

1. JavaScript жоқ қарапайым "Басына оралу" түймесі

Пайдаланушыға мұндай функционалдылықты қамтамасыз етудің өте қарапайым жолы бар. Бұл әдіс кез келген кітапханаларды немесе қосымша сценарийлерді пайдалануды қажет етпейді және тек HTML көмегімен және қажет болса, қарапайым ішкі сілтеме жасау арқылы CSS көмегімен орындалады.

Мұны беттің төменгі жағындағы кез келген жерде орындау үшін келесі кодты қосыңыз:

^ Жоғарғы

CSS коды мысалы:

Жоғарғы түйме (ені: 100 пиксель; жиек: 2 пиксель қатты # ccc; фон: #f7f7f7; мәтінді туралау: ортасына; толтыру: 10 пиксель; орын: бекітілген; төменгі: 50 пиксель; оң жақ: 50 пиксель; курсор: көрсеткіш; түс: # 333; қаріп -family:verdana font-size: 12px; -moz-border-radius: -webkit-border-radius: 5px;

Кемшіліктері:

JavaScript көмегімен жасалған түймелер қалқымалы болуы мүмкін және пайдаланушы бетті сәл төмен жылжытқанда бірден пайда болады, бірақ жоғарыдағы мысалда ол үнемі көрсетіледі.

Айналдыру тегіс болмайды және басқаннан кейін пайдаланушы бірден беттің жоғарғы жағына қайта бағытталады.

Бұл түйме түрінің артықшылықтары:

Түймені басқару үшін сценарийлерді немесе үлкен кітапханаларды пайдаланудың қажеті жоқ. Және бұл өте үлкен плюс.

2. jQuery арқылы жоғарыға оралу түймесі

Түйме өте қарапайым орындалады. Оның жұмыс істеуі үшін сізге jQuery кітапханасы, jQuery оқиғалары бар шағын сценарий, белгілі стильдер және мәтіннің өзі және қажетті идентификаторы бар DIV тегі қажет.

Түйме Firefox 3.0.10 - 3.6.13 нұсқаларынан бастап браузерлерде жұмыс істейді, Internet Explorer 7 және 8, Google Chrome,JQuery 1.4.3. Өкінішке орай, түйме IE 6-да жұмыс істемейді, бірақ бұл сізге қажет пе :)?

JQuery JavaScript коды:

Төмендегі кодты сайтыңыздың барлық беттеріндегі тегтің алдында енгізуіңіз керек. Егер jQuery кітапханасы сіздің сайтыңызға қосылған болса, бірінші жолды қосудың қажеті жоқ.

$(функция() ( $(терезе).scroll(функция() ( if($(this).scrollTop() != 0) ( $("#toTop").fadeIn(); ) else ( $(" #toTop").fadeOut(); ) )); $("#toTop").click(функция() ( $("body,html").animate((scrollTop:0),800); )); )))

Әдемі беру үшін сыртқы түріТүймеге келесі стильдерді қосу керек. Бұлар сайтыңыздың стильдер кестесіне ең жақсы қосылған.

#toTop (ені:100px; жиек:1px қатты #ccc; фон:#f7f7f7; мәтінді туралау:орталық; толтыру:5px; позиция:бекітілген; төменгі:10px; /* беттің төменгі жиегінен түйме шегінісін*/ оң: 10px ;

Түймені шақыру үшін тегтің алдына келесі HTML кодын қосыңыз.

^ Жоғары

3. UItoTop JQuery плагині

Түймені біркелкі етіп көрсететін және оны басқан кезде біркелкі жоғары жылжытатын қарапайым плагин. Сайтыңызда плагинді пайдалану үшін белгілеуге ешқандай тегтер қосудың қажеті жоқ HTML беттері. Барлық қажетті плагин файлдарын қосыңыз және ол жұмыс істейді.

Дереккөздер

Ұсынылған мұрағатта 3 қалта бар: css - түйме стиліндегі файл, img - сурет және 4 JavaScript файлы бар js қалтасы.

Байланыс JavaScript файлдары:

Жүктелген мұрағатты дереккөздермен бірге сайтыңыздағы кез келген қалтаға ашыңыз. Плагинді пайдалану үшін бізге қол жетімді JS файлдарының үшеуін қосу керек. Оларды қосу үшін жабу тегіне дейін келесі файл жолдарын қосыңыз:

$(document).ready(function() ( /* var defaults = ( контейнер идентификаторы: "toTop", // өшірілетін элемент идентификаторы containerHoverID: "toTopHover", // өшірулі элементтің жылжыту идентификаторы scrollSpeed: 1200, easingType: "linear" ) ; */ $().UItoTop(( easingType: "easeOutQuart" ));

Плагин файлдары орналасқан каталогқа сәйкес файлдарға апаратын жолдарды түзетіңіз.

Егер сіз бұрын jQuery кітапханасын сайтыңызға қосқан болсаңыз, келесі кодты қосудың қажеті жоқ екенін ескеріңіз:

CSS қосу:

Келесі қадам - ​​қосу CSS стильдері, оларсыз түйме жұмыс істемейді. Оларды қосудың екі жолы бар.

Бірінші әдіс - сайттың барлық беттеріндегі тегтер арасында CSS мәнері файлына сілтеме қосу:

Тек файл жолын өзгертуді ұмытпаңыз.

Екінші әдіс - ui.totop.css файлының барлық мазмұнын көшіріп, оны сайттың CSS стильдер кестесі файлына қою. Екінші әдіс неғұрлым ұтымды болады, өйткені ол қажетсіз файлдарды қосуды қажет етпейді.

4. JQUERY жүйесінде жоғары және төмен жылжытыңыз

Бұл шешім бетті төмен және жоғары жылжытуға мүмкіндік береді, себебі ол екі түймеден тұрады. Түймешіктер беттің сол жағында тұрақты орналасқан. Айналдыру кезінде түймелер біркелкі жыпылықтайды. Бұл әсерді демонстрацияны көру арқылы көруге болады.

Дереккөздер

Жүктелген мұрағатта түйменің жұмыс істеуі үшін қажетті барлық файлдар болады. Бұл CSS, JS файлдары және көрсеткі кескін файлдары.

HTML қосу:

Алдымен сайттың барлық беттерінде түймелерді шақыру үшін HTML кодын орналастыру керек. Ол үшін төмендегі мәтінді бірден тегтің алдына қойыңыз.

JavaScript қосылымы:

HTML кодынан кейін бірден тегтің алдында қажетті JavaScript файлдарын және JQuery кодын шақыру кодын орналастырыңыз.

$(функция() ( var $elem = $("#content"); $("#nav_up").fadeIn("баяу"); $("#nav_down").fadeIn("баяу"); $( window).bind("scrollstart", function())( $("#nav_up,#nav_down").stop().animate(("мөлдірлік":"0,2")); $(терезе). bind ("scrollstop", function())( $("#nav_up,#nav_down").stop().animate(("мөлдірлік":"1")); $("#nav_down"). click( function (e) ( $("html, body").animate((scrollTop: $elem.height()), 800); )); $("#nav_up").click(функция (e) () $( "html, body").animate((scrollTop: "0px"), 800 ));

JS файлдарына апаратын жолдар өз жолдарыңызбен ауыстырылуы керек.

Кодтың бірінші жолында JQuery кітапханасы бар, сондықтан оны бұрын сайтыңызға қосқан болсаңыз, оны жоюыңыз керек.

Одан кейін толығырақ қарастыруды қажет ететін белгілі бір функцияларды қамтитын басқа JS файлы мен кодтың қосылымы келеді. Өйткені олардың көмегімен түймелердің кейбір параметрлерін өзгертуге болады. Төменде түсініктемелері бар код берілген:

// мазмұн - div идентификаторы, оның ішінде айналдыруға болатын барлық мазмұн болса, сайтыңыздың барлық беттері басқа идентификаторда болса, оны осында енгізуге болады, өйткені онсыз түймелер. жұмыс істемейді $(функция( ) ( var $elem = $("#content"); // келесі екі жолды пайдалану арқылы түймелер көрсетіледі $("#nav_up").fadeIn("баяу"); $(" #nav_down").fadeIn(" баяу"); // айналдыру кезінде түймелер өшетін әсерге ие, бұл олардың мөлдірлігін өзгерту арқылы жүзеге асырылады, сондықтан 0,1-ден 1-ге дейінгі диапазондағы 0,2 көрсеткішін өзгерту арқылы олардың мәнін реттеуге болады. мөлдірлік $(терезе).bind("scrollstart", функция ()( $("#nav_up,#nav_down").stop().animate(("мөлдірлік":"0,2")); ) // мұнда бірдей мөлдірлікті реттеуге болады, бірақ түймелер басылған кезде бетте әдепкі мән 1 $(терезе).bind("scrollstop", function())( $("#nav_up, #nav_down").stop().animate(("мөлдірлік":"1" )); )); // 800 санын өзгерту арқылы бетті айналдыру жылдамдығын арттыруға немесе азайтуға болады $("#nav_down"). click(функция (e) ( $("html, body").animate((scrollTop: $elem .height()), 800);

))) // жоғарыдағыдай, бірақ төмен жылжу үшін $("#nav_up").click(функция (e) ( $("html, body").animate((scrollTop: "0px"), 800); ) );

)))

CSS қосылымы:

CSS қосу үшін бастапқы мұрағатта орналасқан style.css файлын сайт беттеріне қосыңыз:

JQuery көмегімен төменнен жоғарыға бет мазмұнын тегіс айналдыруды ұйымдастырудың тағы бір нұсқасы. Түйме беттің төменгі оң жағында орналасқан және бетті сәл төмен айналдырсаңыз ғана пайда болады. Барлығы CSS және JS кодының кішкене бөлігі, сондай-ақ түйме ретінде пайдаланылатын кішкентай кескін арқылы жүзеге асырылады.

Ең жақсы нұсқа - осы файлдың стильдерін көшіріп, оларды сайтыңыздың стильдер файлына қою.

Енді түймені сайтқа қосу үшін не істеу керектігін анықтайық

5. JQuery көмегімен бірқалыпты жоғары жылжыту түймесі

Маған бұл түйме ұнайды, өйткені оны құру көптеген сценарийлерді қажет етпейді және оның жақсы әсерлері бар.

Сурет:

Сізге түйменің суреті қажет, кез келгенін алуға болады немесе мынаны пайдалануға болады:

Негізгі бет мазмұнынан кейін немесе тегтің алдында түймені шақыру үшін келесі HTML кодын орналастырыңыз:

Бұл кодты пайдаланып, сыртқы түріне қосымша, біз түйменің орнын анықтаймыз және толтыруды оң жақтан 100 пиксельге және төменнен 50 пиксельге орнатамыз. Оны сайттың стильдер кестесіне қосқан дұрыс.

Біріншіден, кітапхана сіздің сайтыңызға қосылмаған болса, оны қосамыз. Осы мақсатта тегтер арасында...? келесіні енгізіңіз:

Жоғарғы

Айналдыру(ені:40px; биіктік:40px; мөлдірлік:0,3; орын: бекітілген; төменгі: 50px; оң жақта: 100px; дисплей: жоқ; мәтін шегінісі: -9999px; фондық: url("icon_top.png") қайталанбайды ;)

Бірінші ScrollTop - айналдыру жолағының ағымдағы тік орнын анықтайды және ол 100 пиксельден жоғары болса, түйме автоматты түрде пайда болады. Оның ертерек немесе кейінірек пайда болуын қаласаңыз, бұл мәнді қажетінше өзгертіңіз.

Көріп отырғаныңыздай, тағы екі параметр бар - 0 - бұл бет нөлдік пиксельге дейін ең басына дейін жылжиды, ал 600 - бұл миллисекундтағы анимация жылдамдығы.

Содан кейін, кітапхананы қосқаннан кейін бірден келесі JQuery кодын орналастыру керек:

6. Анимацияланған жоғары түйме

Бетті белгілі бір таңбалар санын төмен жылжытқанда, төменгі сол жақта көрсеткісі бар үлкен түйме пайда болады. Меңзерді апарған кезде түйме біркелкі жанады, ал басқан кезде ол біркелкі жоғары жылжиды.

Түймені жасау үшін көрсеткі кескіні, CSS мәнерлері және JQuery пайдаланылады.

5. JQuery көмегімен бірқалыпты жоғары жылжыту түймесі

HTML коды:

Түймені шақыру үшін келесі HTML кодын пайдаланыңыз:

Жоғарыға оралу

Бірақ сіз оны беттің негізгі мазмұнының алдына қоюыңыз керек, егер сіз оны жабу тегінен бұрын орналастырсаңыз, түйме жұмыс істемейді.

Және тағы біреуі маңызды нүкте HTML коды туралы. Тегке идентификатордың жоғарғы бөлігін тағайындау керек.

Тегке әлдеқашан белгілі бір идентификатор тағайындалған болса, жоғарыда орналасқан түймені шақыру кодында #top #сіздің идентификаторымен ауыстырылуы керек.

Түйменің толтырылуы және сыртқы түрі курсорды жылжытқанда кідіріс әсерін жасау үшін CSS көмегімен орнатылды; Оны сайттың CSS файлына енгізген дұрыс.

#back-top (позиция: бекітілген; төменгі: 30 пиксель; сол жақ шет: -150 пиксель; ) #back-top a ( ені: 108 пиксель; дисплей: блок; мәтінді туралау: орталық; шрифт: 11px/100% Arial, Helvetica , sans-serif text-decoration: none; /* transition: 1s a:hover (color: #000; ) /* arrow icon (span tag) */ #back-top span; : 108px биіктік: блок: фон: #ddd url( up-arrow.png) ортасы дөңгелектенеді */ -webkit-border-radius; moz-border-radius: 15px; /* transition */ -webkit- transition: 1s; -moz-transition: 1s ) #back-top a:hover span ( background-color: #777; )

$(құжат).ready(функция())( // #back-top бірінші жасыру $("#back-top").hide(); // #back-top ішінде өшіру $(функция () ( $() терезе ).scroll(функция () ( if ($(this).scrollTop() > 100) ( $("#back-top").fadeIn(); ) else ( $("#back-top"). fadeOut ( ) )); // $("#back-top a") түймешігін басыңыз (функция () ( $("body,html").animate(( scrollTop: 0 )) түймешігін басыңыз. 800 ); қайтару жалған;

Бірінші жол JQuery кітапханасын байланыстырады, егер сізде ол қосылған болса, онда бұл жолды қоспаңыз. Кодтың қалған бөлігін тегтер арасына қосыңыз...

Қажет болса, келесі параметрлерді өзгертуге болады:

• 100 - айналдырудан кейін түйме пайда болған пикселдер саны;
• 0 - бұл айналдыру нөлдік пикселге, яғни ең жоғарғы жағына дейін орындалатынын білдіреді.
• 800 - миллисекундтағы айналдыру жылдамдығы.

7. JQuery және CSS көмегімен мөлдір түйме

Үлкен мөлдір жоғары түймесі беттің ортасында айналдыру кезінде пайда болады. Оны байқамау қиын. Тек JQuery және CSS көмегімен жасалған.

HTML түсінейік:

Түйме жұмыс істеуі үшін айналдыру қажет негізгі бет мазмұны екі тегтің арасында орналасуы керек:

Мұнда ерекше ештеңе жоқ, жай ғана осы кодты сайттың CSS стиль файлына қойыңыз.

#хабарлама a ( /* дисплей: жасыру алдында блоктау */ дисплей: блок; дисплей: жоқ; /* сілтеме барлық басқа элементтерден жоғары */ z-индекс: 999; /* сілтеме мәтінді артына жасырмайды */ мөлдірлік : .8; /* сілтеме бетте қалады */ позиция: бекітілген /* сілтеме беттің төменгі жағында болады */ жоғарғы: 100% -80px /* = биіктік + таңдаулы төменгі жиек; */ /* сілтеме ортада */ сол жақта: 50% маржа-сол: -160px; /* = ені жартысы */ /* бұрыштарды дөңгелектеу (сіздің қалауыңыз бойынша) */ -moz-border-radius: 24px ; -webkit-border-radius: 24px;

$(функция () ( /* өнімділікті арттыру үшін жергілікті айнымалы мәндерді орнату */ var scroll_timer; var displayed = false; var $message = $("#message a"); var $window = $(терезе); var top = $ (document.body).children(0).position().top; /* терезедегі айналдыру оқиғасына әрекет ету */ $window.scroll(функция () ( window.clearTimeout(scroll_timer); scroll_timer = window.setTimeout(функция) () ( if($window.scrollTop() 0) ($("#scroller").fadeIn();) else ($("#scroller").fadeOut();)))); функция () ($("body,html").animate((scrollTop: 0), 400); қайтару false;) )); Сайтта орнату

Сайт үшін жоғары жылжыту түймесін орнату үшін кодты қажетті жерге орналастыру керек. Оны тегтің алдында енгізу керек .

CSS-те түймені сәндеу

Көбінесе сайттың «жоғары» түймесі төменгі жағында («төменгі деректеме») орналасқан.

Сайттың style.css файлына келесі кодты қосу керек:

Бұл жағдайда кескіннің ені мен биіктігіне арналған деректер қажет болады. Алынған деректерді кодқа енгізу ғана қалады, ал сайттың «жоғары» түймесі дайын болады! Тағы не?

Wordpress сайтына арналған жоғары түйме

Бұл CMS үшін «Жоғарғы» түймесін плагиндер арқылы, сондай-ақ дербес түрде жасауға болады.

Плагин әдісі - ең ыңғайлы және орнату оңай, өйткені орнату түймесін басып, плагин мәзіріндегі барлық функцияларды конфигурациялау жеткілікті.

Соңғысын таңдауға сақтықпен қарау керек, өйткені онымен бірге сайт үшін вирусты оңай сатып алуға болады. Ең танымал және дәлелденген опция - Scroll Back To Top деп аталатын плагин. Сіз оны стандартты Wordpress плагин іздеу арқылы жүктей аласыз.

Бұл кеңейтімнің бірнеше функционалдығы бар және Wordpress сайты үшін «жоғарыға оралу» түймесін теңшеу өте оңай болады. Барлық мәндерді өзгерту қажет емес, тек сайт бетіндегі түйменің көрінісін және орнын конфигурациялау қажет.

Көріп отырғаныңыздай, плагиндерді пайдаланып «жоғары» түймесін орнату өте қарапайым. Бірақ бір маңызды нюанс бар, ол әркім орнатылған плагин CMS жүктейді. Бұл интернет-ресурстың жылдамдығына әсер етуі мүмкін. Сондықтан веб-сайт иелерінің көпшілігі барлық өзгертулерді үшінші тарап кеңейтімдерін пайдаланбай, тікелей кодта жасауға тырысады. Сіз HTML тілінде веб-сайт үшін «жоғары» түймесін жасай аласыз, ол тұтынылатын ресурстарды азайтады.

Барлығын өзгертпес бұрын жүйелік файлдар Wordpress оларды жасау керек сақтық көшірмелер. Әрі қарай, сіз жоғарыда сипатталған жеке түймені жасау үшін барлық қадамдарды орындай аласыз.

Joomla үшін жоғары түйме

CMS Joomla сонымен қатар Wordpress сияқты плагиндерді орнатуды қолдайды. Joomla 3 жүйесіндегі сайтқа арналған «жоғары» батырмасының ең сәтті нұсқасы – Беттің жоғарғы жағы деп аталатын кеңейтім.

Бұл CMS-те кез келген плагинді «Кеңейтім менеджері» арқылы орнатуға болады. Мұны істеу үшін сізге қажет:

• плагинді интернеттен жүктеп алыңыз;
• кеңейтім менеджеріндегі «Шолу» түймесін басыңыз;
• жүктелген мұрағатты таңдаңыз;
• «Жүктеу» түймесін басып, орнатыңыз.

Енді оны Plugin Manager ішінде белсендіру керек. Мұны істеу үшін сіз осы бөлімге өтіп, плагинді тауып, оның күйін «қосылған» күйіне ауыстыруыңыз керек.

Беттің жоғарғы жағында келесі функциялар бар:

• Run in/administrator – опцияны тек интернет-ресурста ғана емес, сонымен қатар Joomla CMS панелінің өзінде де қосу.
• Түйменің көрсету орны – «жоғары» түймесі пайда болуы үшін пайдаланушы қанша пиксельді артқа айналдыруы керек.
• Omit Button Text – батырмада мәтіннің болуы.
• Әрқашан жоғарғы жағында - сайт беті әрқашан басынан бастап көрсетіледі. Беттегі белгілі бір орынға жылжу үшін анкерлерді пайдаланған кезде бұл опцияны белсендіру қажет емес.
• Smooth Scroll – беттің жылжуын тегіс етеді.
• Айналдыру ұзақтығы - бет толығымен басына ауысатын уақыт.
• Scroll Transition - айналдыруға тамаша көрнекі әсерлер қосады.
• Transition Easing – беттің жоғарғы жағына «жеңілдету» қозғалысы.
• Сілтеме орны - белгішенің орны. Стандартқа сәйкес түйме төменгі оң жақ бұрышта орналасқан.
• Стильдерді пайдаланыңыз - төмендегі өрісте орнатуға болатын жеке түйме мәнері. Теріс мәнге ауыстырылса, барлық сәндеу параметрлері белсенді сайт тақырыбынан алынады.
• Сілтеме стилі - түйме мәнері параметрлерін енгізуге арналған өріс.

«Жоғары» түймесінің мәнерін өзіңіз баптау үшін сізде CCS туралы ең аз біліміңіз болуы керек. Әйтпесе, соңғы параметрдің мәнін «Жоқ» күйіне ауыстыру керек.

Тағы бір маңызды нюанс - белгішедегі әдеттегі жазу ағылшын тіліндегі мәтінді қамтиды: Жоғарыға оралу. Мұндай мәтін орыс тілді сайтта болуы мүмкін емес, сондықтан оны плагин параметрлерінде өшіру немесе оны орыс тіліне өзгерту керек.

Бұл жазуды өзгерту үшін FTP немесе кірістірілген хостинг арқылы сайт серверіне кіру керек файл менеджері. Әрі қарай, «/administrator/language/en-GB/» каталогында «en-GB.plg_system_topofthepage.ini» деп аталатын файлды табу керек.

Мәтінді өзгертпес бұрын, кодтауды өзгерту керек осы құжаттың UTF-8 үшін. Бұл орыс әріптерін қалыпты түрде көрсетуге мүмкіндік береді.

" PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Жоғарыға оралу" "

және тырнақшадағы сөз тіркесін орысшаға өзгертіңіз. «Жоғары!», «Басына дейін!» сияқты сөз тіркестерін қолдануға болады. немесе «Жоғары!»

Ucoz үшін жоғары түйме

Ucoz сайтындағы "жоғары" түймесі кодты енгізу арқылы орындалуы керек, өйткені бұл CMS үшін плагиндерді қосу мүмкін емес. Дегенмен, бұл жүйелік файлдарды ұзақ зерттеуді және қажетті жолдарды іздеуді қажет етпейді;

Орнату үшін бізге қажет:

• «Басқару тақтасы -> Дизайн -> Дизайнды басқару (үлгілер) -> Сайттың төменгі жағына өтіңіз;
• сценарийді енгізіңіз (жобаның ресми сайтында және үшінші тарап ресурстарынан табуға болады).

Қорытынды

Осыдан кейін төменгі оң жақ бұрышта пайдаланушыны беттің ең жоғарғы жағына жылжытатын белгіше пайда болады.

Көріп отырғаныңыздай, кез келген CMS үшін «Жоғарыға оралу» түймесін орнату аса қиын болған жоқ. Автоматтандырылған орнату әдісін (плагиндер) немесе қолмен пайдалануға болады. Дегенмен, соңғы нұсқа ең қолайлы болып қала береді, өйткені ол сайттың жұмысына теріс әсер етпейді.

Сайт ресурстарын тұтынуды азайту үшін HTML сайты үшін «жоғары» түймесін пайдалануға болады, өйткені үлкен санкеңейтімдер болуы мүмкін теріс әсер етедіресурстардың өнімділігі туралы. Бір «жоғары» түймешігінің плагині сайт беттерінің жүктелу уақытына айтарлықтай әсер етпейді, бірақ көп жағдайда пайдаланушыда CMS жүйесінде кемінде ондаған плагин орнатылған. Бұл жағдайда кез келген плагин сайт беттерінің жұмысына теріс әсер етуі мүмкін.