Tu je obrovský zoznam posúvacích doplnkov jQuery pre vašu stránku. Rôzne rolovacie triky k nám prišli zo zahraničia nie tak dávno a uzatvorili množstvo moderných portálov a stránok, ktoré chceli vyniknúť. Práca na vertikálnom posúvaní by mohla zlepšiť konverzie a nepochybne aj používateľskú skúsenosť. Vďaka zaujímavým prístupom JS + CSS3 môžete vylepšiť rozhranie svojho webu. Ak pridáte trochu fantázie, môžete z akéhokoľvek pluginu získať pre svoju stránku niečo jedinečné. Každá stránka sa predsa snaží vyčnievať zo šedej masy rôzne cesty. Vďaka rolovaniu je možné niektoré stránky preniesť na stránku s implementovaným pluginom, ktorý zlepší príjem dôležitá informácia užívateľ. Táto technológia najlepšie sa hodí na rôzne portfóliá alebo predvádzanie produktov a pod.

Poďme rovno k veci.

Sly

Sly je JavaScript knižnica pre vylepšené jednosmerné posúvanie s podporou navigácie prvkov. Dá sa použiť ako jednoduchá náhrada rolovania, ako navigačný nástroj alebo ako skvelé navigačné a animačné rozhranie pre paralaxové stránky.

jQuery ScrollPath

Toto je doplnok na definovanie vlastných posúvacích ciest.

okná

Animovať posúvanie

AnimateScroll je doplnok jQuery, ktorý vám umožňuje posúvať sa na ľubovoľnú časť stránky jednoduchým volaním funkcie animatescroll() s id alebo triedou prvku, na ktorý chcete prejsť.

scrollme

Počas rolovania stránky môže ScrollMe meniť mierku, otáčať, prekladať a meniť priehľadnosť prvkov na stránke. Je ľahké nastaviť a nevyžaduje jediný riadok javascriptu.

zalepiť

Jednoduchý doplnok, ktorý „pripne“ prvok do hornej časti okna prehliadača jeho posúvaním, pričom ho vždy ponechá na očiach. Tento doplnok funguje na viacstránkových stránkach, ale má pridané vlastnosti pre rozloženia s jedným pagerom.

blokové posúvanie

blokové posúvanie je doplnok jQuery, ktorý premení sadu prvkov na bloky a vykreslí ich jednu obrazovku po druhej. Cieľom je rozdeliť vašu stránku na kúsky pre lepšiu prezentáciu a tok používateľov. Scroll lock automaticky zmení veľkosť vašej stránky.

Starscroll

Vytvorte div ako pozadie... aktivujte doplnok; animácia posúvania. Doplnok automaticky nastaví div, aby fungoval ako neviditeľný.

rolovacia paluba

scrollocue

scrollocue je zásuvný modul jQuery na vytvorenie jednoduchého systému autocue/teleprompter na posúvanie riadkov textu.

scrollorama

Stellar.js

Stellar.js je doplnok jQuery, ktorý poskytuje efekty paralaxného posúvania ľubovoľnému prvku posúvania.

super zvitok orama

Paralaxa

Responzívne 3D posúvanie

jQuery Scrollify

Doplnok jQuery, ktorý vám pomáha posúvať sa a prichytávať k sekciám. Kompatibilné s Touch.

vivus.js

Vivus je ľahká trieda JavaScriptu (bez závislostí), ktorá vám umožňuje animovať SVG tým, že im dáva schopnosť kresliť.

jQuery SlimScroll

slimScroll je malý (4,6 kB) doplnok jQuery, ktorý premení akýkoľvek div na rolovateľnú oblasť s pekným posúvačom.

jQRangeSlider

jQuery pin

Chceli ste niekedy pripnúť niečo na okraj textu? Už ste niekedy potrebovali tenký lepiaci prvok, ktorý zostane na svojom mieste, kým sa posúvate nadol?

jQuery Pin tu na pomoc! Vložte ľubovoľný prvok do hornej časti nádoby. Jednoducho ho vypnite pre menšie veľkosti obrazovka, kde nie je miesto pre tento druh vyčíňania.

Nekonečné posúvanie AJAX

Overscroll

Overscroll je doplnok jQuery a polyfill pre štýl posúvania Safari v mobile. Je určený na použitie v stolných prehliadačoch s Najnovšia verzia jQuery.

jQuery.localScroll

Parallax ImageScroll - jQuery Plugin

jQuery a doplnok kompatibilný s amd na vytvorenie efektu paralaxy, ako je uvedené na spotify.com.

fullPage.js

Ľahký a ľahko použiteľný doplnok na vytváranie webových stránok s rolovaním na celú obrazovku (známych aj ako jednostránkové webové stránky, vstupná stránka), môžete tiež pridať niekoľko vodorovných posúvačov do sekcií lokality.

Parallax.js

Jarallax

Jarallax je open source knižnica JavaScript zdrojový kód, čo zjednodušuje nastavenie css na základe interakcie. Jarallax uľahčuje vytvorenie webovej stránky s paralaxným rolovaním

jInvertScroll

jQuery fullContent.js

Celý obsah jQuery umožňuje plnohodnotnú tvorbu webových stránok.

jQuery One Page Scroll

Vytvorte webovú stránku s rolovaním po jednej stránke (web pre iPhone 5S) pomocou doplnku na posúvanie jednej stránky.

Parallax Plugin jQuery

jQuery Parallax je skript, ktorý simuluje efekt paralaxy, ako je vidieť na nikebetterworld.com.

jquery.parallax.js

jquery.arbitrary-anchor.js

Portfoliojs

Portfoliojs je ľahký plugin jQuery galérie pre vaše krásne horizontálne rolujúce obrázky, ktoré podporujú prehliadače pre stolné počítače, tablety a mobilné zariadenia.

Rolovací paralaxný doplnok

Rolovacia paralaxa je nový doplnok jQuery, ktorý spája efekt paralaxy s posúvačmi a kolieskom myši. Toto povoľuje obrázok na pozadí alebo čokoľvek iné na posúvanie iným tempom ako webová stránka, keď používateľ posúva. Výsledný efekt paralaxy je jednoduchý spôsob, ako vytvoriť ilúziu hĺbky na vašom webe.

posúvaciu kartu

scrolly

scrollr

Samostatná paralaxná rolovacia knižnica pre mobilné zariadenia(Android + iOS) a PC. Žiadne jQuery. Len obyčajný JavaScript (a nejaké kúzlo).

SMINT

Smint je jednoduchý doplnok jQuery, ktorý pomáha s navigáciou na webových stránkach s jednou stránkou.

Vlastný posúvač obsahu jQuery

Vysoko prispôsobiteľný posúvač jQuery. Funkcie zahŕňajú vertikálny a/alebo horizontálny posuvník, vlastnú hybnosť rolovania, koliesko myši (prostredníctvom doplnku jQuery mousewheel), podporu klávesnice a dotyková obrazovka pripravené na použitie s témami a prispôsobením pomocou CSS, podpora smeru RTL, nastavenia možností pre plnú kontrolu funkcií rolovania, spôsoby spúšťania akcií ako rolovanie, aktualizácia, zničenie atď.

Doplnok ScrollUp Bar

Doplnok scroll up (jQuery) skryje hornú lištu pri posúvaní nadol a zobrazuje ju pri posúvaní nahor. Toto je obzvlášť užitočné pre mobilné rozhrania aby ste ušetrili vzácny priestor.

StickyTableHeaders

jQuery panelSnap

isInViewport.js

vodopád

plugin jquery vodopád, ako napríklad Pinterest, huaban.com, faxianla.com

scroller

jQuery.SerialScroll

jscroll

jscroll je doplnok jQuery pre nekonečné posúvanie, ktorý napísal Philip Klausinsky. Nekonečný zvitok; taktiež známy ako lenivé načítanie, nekonečné posúvanie, autopirácia, nekonečné stránky atď.

FoldScroll

plugin scrollUp jQuery

posunúť nahor je ľahký doplnok jQuery na vytvorenie vlastnej funkcie Scroll Up, ktorá bude ľahko fungovať s akoukoľvek webovou stránkou.

multiScroll.js

Vytvorte rozdelené stránky s dvoma vertikálnymi posuvníkmi. Kompatibilný s mobilné telefóny a zariadenia a staré bowsery ako IE 8.

Ľubovoľný posúvač zoznamu

qpScroll

qpScroll je doplnok jQuery, ktorý vytvára pozadie paralaxy pre akúkoľvek stránku alebo div. Nastavenie je veľmi jednoduché. Dá sa pridať na akúkoľvek existujúcu stránku bez toho, aby bolo potrebné meniť označenie HTML.

jQuery Stick 'em

Parallax.js

Paralaxný motor reaguje na orientáciu inteligentného zariadenia. Tam, kde nie je gyroskop alebo hardvér na detekciu pohybu, sa namiesto toho použije poloha kurzora.

Slinky.js

Slinky.js je doplnok jQuery na vytváranie krásnych rolovacích navigačných zoznamov so skladacími hlavičkami.

Infinity.js

Infinity.js je UITableView pre web: zrýchľuje rolovanie v dlhých zoznamoch a udržiava vaše nekonečné informačné kanály plynulé a stabilné pre vašich používateľov. Je malý, rokmi overený a vysoko efektívny.

Svojvoľná kotva

Trasové body

Trasové body je knižnica, ktorá uľahčuje spustenie funkcie vždy, keď prejdete na prvok.

jQuery.kinetic

Rolovacia lišta priebehu

Na tento účel existujú dve zložky. Obsah a pruhy. Každá sekcia obsahu má ID, ktoré pomáha vypočítať percento. Každá lišta má odkaz na plynulé posúvanie do danej sekcie.

jQuery Smooth Div Scroll

Plynulé rolovanie Div je doplnok jQuery, ktorý posúva obsah horizontálne doľava alebo doprava.

Príbeh jQuery

Jednoduchý doplnok jQuery rozširujúci doplnok animateScroll o možnosti jednej stránky.

jQuery Animation Scroll Plugin

jQuery.ScrollTo

Doplnok Endless Scroll jQuery

Nekonečné posúvanie (alebo nekonečné posúvanie) je populárna technika medzi webovými stránkami 2.0, ako sú Google Reader a Live Image Search, kde namiesto listovania prvkami pomocou tradičnej techniky stránkovania stránka jednoducho načítava nové prvky pripojené ku koncu.

Za posledných niekoľko rokov sa popularita jednostránkových (rolovacích) stránok vážne zvýšila. Hoci tento druh stránky a nie pre každého, stále je užitočné vedieť, ako fungujú. Dnes ukážem ako vytvoriť jednoduchý jednostránkový (rolovací) web pomocou jQuery.

Než začneme, môžete si pozrieť Demo.

No, začnime...

Vytvoríme nasledovné:

HTML

Označenie (HTML) stránky bude mimoriadne jednoduché.

Najprv vytvoríme navigáciu.

Čo sme urobili: prvok navigácie má šírku 100 % , takže jeho šírka sa bude rovnať šírke nadradený prvok. Pre navigáciu je vlastnosť position nastavená na fixed , takže pri posúvaní stránky bude prvok nav vždy pred očami používateľa. Na vytvorenie navigácie sme do značky nav umiestnili značku ul.

Výhody:

1. Ak má používateľ vypnutý javascript, odkazy stále fungujú.
2. O Pomocník jQuery budeme čítať atribút href z každého odkazu.

Teraz, keď sme vytvorili jednoduchý navigačný panel, môžeme prejsť k hlavnému obsahu stránky.

Ako vidíte, značenie je veľmi jednoduché. Pozostáva z bloku obsahu, ktorý obsahuje odseky (p). Každý odsek má ID spojené s odkazom v našej navigácii.

css

Pred pokračovaním v CSS nezabudnite zahrnúť . Odstraňuje problémy spojené s nekompatibilitou medzi prehliadačmi a umožňuje vám pracovať bez premýšľania o tom, či bude stránka vyzerať rovnako vo všetkých moderných prehliadačoch.

Začnime štylizáciou hlavného obsahu stránky, ktorá je veľmi jednoduchá.

Telo ( font-family: arial; font-size: 15px; line-height: 25px; color: #515151; background: #fdfdfd; ) #content ( width: 500px; margin: 0 auto; padding-top: 40px; height : 2000px; ) #content p ( okraj-dole: 25px; )

V tele definujeme text a farby pozadia; blok obsahu je široký 500 pixelov a je vycentrovaný. Hodnota pre padding-top bloku obsahu je 40px – toto sa robí tak, aby navigácia neblokovala horných 40px obsahu. Výška je 2 000 pixelov, aby sa zmestila na obsah a zobrazovala rolovanie. Aj keď to spravidla nie je potrebné. Každý odsek má spodný okraj 25 pixelov, takže môžete vidieť, kde jeden odsek končí a druhý začína.

Teraz prejdime k navigácii:

Nav ( šírka: 100%; pozícia: pevná; výška: 40px; pozadie: biela; orámovanie: 1px plný #CACACA; border-top: žiadny; -webkit-box-shadow: 0px 0px 3px 1px #ebebeb; -moz-box -shadow: 0px 0px 3px 1px #ebebeb; box-shadow: 0px 0px 3px 1px #ebebeb; ) nav ul (šírka: 750px; okraj: 0 auto; ) nav ul li( float: left; width: 150px; text-align : center; ) nav ul li a ( line-height: 40px; font-size: 16px; text-decoration: none; color: #515151; border-bottom: 1px dotted #515151; ) nav ul li a:hover( color : #000 ;)

Ak chcete, aby navigácia pokrývala celú šírku prehliadača, nastavte jej šírku na 100 % . Aby navigácia zostala na obrazovke počas rolovania, má deklaráciu position:fixed. Výška je 40 pixelov, čo je celkom normálne pre horizontálne horné menu. Na dosiahnutie roztomilého vzhľadu bol použitý jednoduchý štýl. Ul je vycentrovaný a široký 750 pixelov, aby mal každý odkaz dostatok miesta. Každá li je vytvorená tak, aby plávala, takže všetky odkazy sú na rovnakej línii. Nakoniec je odkazom priradený aj jednoduchý štýl.

jQuery

Funguje to takto: keď kliknete na navigačný odkaz, posunie sa na odsek, na ktorý odkaz ukazuje.

Ako vždy, začneme funkciou document.ready

$(dokument).pripravene(funkcia()());

Teraz, predtým ako prejdeme k funkcii kliknutia, napíšme funkciu scrollToDiv, ktorá sa posunie k bloku, ktorý sme vybrali. K dispozícii budú 2 parametre – prvok, na ktorý sa má rolovať, a výška navigačnej lišty v hornej časti stránky.

Funkcia scrollToDiv(element,navheight)( )

Teraz si popíšeme tri premenné, budeme ich potrebovať na presné rolovanie.

Funkcia scrollToDiv(element,navheight)( var offset = element.offset(); var offsetTop = offset.top; var totalScroll = offsetTop-navheight; )

Premenný posun je posun prvku. Používa ho premenná offsetTop na získanie hodnoty top . V dôsledku toho dostaneme vzdialenosť od hornej časti stránky k prvku. Premenná totalScroll je zodpovedná za vzdialenosť, ktorú prehliadač potrebuje na rolovanie stránky. Bez horný panel navigácia, hodnota rolovania sa bude rovnať hodnote offsetTop. Pri výpočte premennej totalScroll si však musíme uvedomiť, že náš navigačný panel blokuje horných 40 pixelov obsahu. Tu nám pomôže parameter navheight.

Nakoniec rolujte stránku:

$("body,html").animate(( scrollTop: totalScroll ), 500);

Funkcia jQuery animate nám umožní implementovať plynulé rolovanie na požadované miesto na stránke. V tomto prípade animácia trvá 500 milisekúnd.

Vlastnosť scrollTop vám umožňuje nastaviť mieru, o ktorú chcete posúvať stránku (vertikálne).

Tu je úplná funkcia scrollToDiv:

Funkcia scrollToDiv(element,navheight)( var offset = element.offset(); var offsetTop = offset.top; var totalScroll = offsetTop-navheight; $("body,html").animate(( scrollTop: totalScroll ), 500) ;)

Prejdime k funkcii kliknutia.

$("nav ul li a").click(function()( return false; ));

Toto je len kostra funkcie kliknutia. Ak na konci označíte návrat ako nepravdivý, prehliadaču zabráni v sledovaní odkazu.

Predtým, ako môžeme odovzdať prvok funkcii, musíme pre ňu nájsť názov.

Varel = $(this).attr("href"); var elWrapped = $(el);

Premenná el obsahuje hodnotu atribútu href. Aby jQuery mohol používať premennú el, musí byť zabalená do elWrapped . Nasledujúci kód jQuery nie je možné spustiť:

#paragraph1.offset();

Ale dá sa to urobiť:

$("#odsek1").offset();

Preto je potrebná premenná elWrapped.

Úplná funkcia kliknutia:

$("nav ul li a").click(function()( var el = $(this).attr("href"); var elWrapped = $(el); scrollToDiv(elWrapped,40); return false; ) );

To je všetko - teraz máme jednoduchý stránka s odkazmi, na ktoré sa po kliknutí posuniete na požadovanú časť stránky.

Dobrý deň, priatelia. V tomto článku budeme analyzovať udalosť jQuery pri posúvaní stránky na konkrétny prvok. Inými slovami, potom. V tomto príklade spustíme udalosť, keď sa stránka posunie do päty. Potom zobrazíme malé vyskakovacie okno s hladkým vzhľadom. A kliknutím ho aj zatvoríme. Čo do nej vložiť, rozhodnite sa sami, existuje veľa možností. Vyzerá to takto:

Začnime značkovaním HTML a nie je tu nič neobvyklé. Všetko je celkom jednoduché a jasné. Veľké plátno textu v spodnej časti päty a blok s tlačidlom, ktoré sa objaví. Tu je kód bloku:

1 2 3 4 5 6 7 8 9 10

<html > <telo > Veľa obsahu tu...<div id="blok"> Nejaký text.<typ vstupu = "tlačidlo" class = "ale" hodnota = "(!LANG:Close" / > !} </div> <div id="footer"> päta</div> </body> </html>

Veľa obsahu tu...

Teraz ozdobme náš skrytý blok a jeho tlačidlo:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

#block ( display : none ; position : fixed ; top : 15px ; right : 15px ; color : #fff ; background : #4CAF50 ; padding : 10px ; border-radius : 5px ; width : 200px ; box-shadow : 0 13px -5px #3a3a3a ; font-family : Arial; text-align : center ; ) .btn( background : #FF9800 ; border : 2px solid #795548 ; color : #fff ; border-radius : 5px ; kurzor : pointer ; padding : 5px 10px; okraj-vrchol: 10px; hrúbka písma: tučné;)

#block( zobrazenie: žiadne; pozícia: pevná; hore: 15 pixelov; vpravo: 15 pixelov; farba: #fff; pozadie: #4CAF50; výplň: 10 pixelov; polomer okraja: 5 pixelov; šírka: 200 pixelov; tieňový rámček: 0 13 pixelov 20 pixelov -5px #3a3a3a; font-family: Arial; text-align: center; ) .btn( background: #FF9800; border: 2px solid #795548; color: #fff; border-radius: 5px; kurzor: pointer; padding: 5 pixelov 10 pixelov; horný okraj: 10 pixelov; hrúbka písma: tučné; )

Teraz sa pozrime priamo na to, čo sa nazýva scroll to element. Stále anglický jazyk potrebné pre vývojára. Štandardne zahrňte jQuery. Urobím to cez CDN, pretože to bude najaktuálnejšia verzia.

<skript src= "//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

A potom samotný kód skriptu, ktorý na stránke vytvorí kúzlo:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

$(document).ready (function () ( var $element = $(".footer" ) ; nech counter = 0 ; $(window) .scroll (funkcia () ( var scroll = $(window) .scrollTop () + $(okno).vyska () ; //Ak sa posuniete na koniec prvku //var offset = $element.offset().top + $element.height(); //Ak prejdite na začiatok prvku var offset = $element.offset () .top if (scroll > offset && counter == 0 ) ( $("#blok" ) .fadeIn (500 ) ; counter = 1 ; ) ) ) ; $(".btn" ) .kliknutie (funkcia () ( $("#blok" ) .slideUp () ; ) ); ));

$(document).ready(function()( var $element = $(".footer"); nech counter = 0; $(window).scroll(function() ( var scroll = $(window).scrollTop() + $(window).height(); //Ak sa posuniete na koniec prvku //var offset = $element.offset().top + $element.height(); //Ak sa posuniete na začiatok prvku prvok var offset = $element .offset().top if (scroll > offset && counter == 0) ( $("#blok").fadeIn(500; counter = 1; ) )); $(".btn ").click(funkcia ()( $("#blok").slideUp(); )); ));

V predvolenom nastavení sa udalosť spustí hneď, ako sa zobrazí začiatok prvku, v tomto prípade päta, ale hodnotu môžete zmeniť zrušením komentára v riadku 7 a funkcia sa spustí, keď posun dosiahne koniec prvku .

Takýmto zložitým spôsobom môžete návštevníkom svojich stránok ukázať svoju jedinečnú ponuku a pridaním cieľov do metriky sledovať jej konverziu.

Reg.ru: domény a hosting

Najväčší registrátor a poskytovateľ hostingu v Rusku.

V prevádzke je viac ako 2 milióny doménových mien.

Propagácia, mail pre doménu, riešenia pre podnikanie.

Svoj výber si už vybralo viac ako 700 tisíc zákazníkov po celom svete.

Bootstrap Framework: Rozloženie s rýchlou odozvou

Video kurz krok za krokom o základoch adaptívne rozloženie v rámci Bootstrap.

Naučte sa sádzať jednoducho, rýchlo a efektívne pomocou výkonného a praktického nástroja.

Nalíčte sa na objednávku a získajte peniaze.

*Prejdením myšou pozastavíte rolovanie.

Späť dopredu

Plynulé posúvanie stránky nahor pomocou jQuery

V tomto videu rozoberieme taký moment, akým je vytvorenie hladkého rolovania stránky nahor pri kliknutí na odkaz.

Keď ste bližšie k spodnej časti stránky, často je vhodné použiť odkaz „Späť na začiatok“.

Túto funkciu je možné implementovať čisto pomocou HTML a CSS, ale v tomto videu vám ukážem, ako môžete túto funkciu vylepšiť a zjednodušiť pomocou knižnice jQuery.

JavaScript nám umožní zabezpečiť plynulý pohyb zo spodnej časti stránky nahor, čím sa vyhneme „skoku“, ku ktorému dochádza pri použití bežnej „kotvy“.

Zobrazia sa iba vtedy, keď sa stránka posunie o určitý počet pixelov nadol, ktorý si môžete sami nastaviť.

To je tiež veľmi výhodné, pretože to upozorní človeka na interaktívny prvok na stránke a všimne si, že existuje možnosť použiť takúto funkciu.

Ukážka scenára a podrobná analýza Pozrite si kód vo videu nižšie.

Stručný prehľad lekcie (všetky podrobnosti nájdete vo videu):

index.html

1. Najprvčo potrebujeme, je súbor, ktorý bude obsahovať samotný odkaz „Späť na začiatok“. Nechaj to tak index.html.

Aby všetko fungovalo, v sekcii hlavu dokument, musíme zahrnúť súbor štýlu a dva súbory JavaScript (viac o nich neskôr):

Najprv zahrnieme knižnicu jQuery, potom súbor script.js s kódom, ktorý si sami napíšeme.

Aj v tomto súbore musíme umiestniť samotný odkaz, po kliknutí sa plynulo dostane do hornej časti stránky:

Hore

script.js

2. Po druhé je súbor script.js, do ktorého zapisujeme funkcie, ktoré vykonávajú hlavné akcie:

$(document).ready(function()( $(function ()( $("#back-top")).hide(); $(window).scroll(function ()( if ($(this).scrollTop () > 700)( $("#back-top").fadeIn(); ) else( $("#back-top").fadeOut(); ) )); $("#back-top a" ).click(function ()( $("body,html").animate(( scrollTop:0 ), 800); return false; )); )); ));

Najprv teda počkáme, kým sa dokument úplne načíta a skryjeme naše tlačidlo „Späť na začiatok“, aby nebolo na stránke spočiatku viditeľné.

Ďalej zaznamenáme udalosť posúvania okna a ak sa posúvanie zníži o 700 pixelov alebo viac, potom hladko zobrazíme tlačidlo „Hore“ pomocou metódy fadeIn. V opačnom prípade to skryjeme metódou vyblednúť.

V druhej anonymnej funkcii sledujeme udalosť kliknutia na odkaz vo vnútri bloku #späť hore a použiť metódu animovať plynulo prejsť na začiatok stránky (scrollTop:0) za 800 ms.

style.css

3. A tretí je súbor štýlu. V našom príklade v ňom nie je nič zbytočné, takže existuje niekoľko štýlov:

Body ( font-size: 13px; line-height: 1,65em; font-family: Verdana, sans-serif; ) p ( margin-left: 150px; ) /* Horné tlačidlo */ #back-top( position:fixed; bottom:10px; left: 0px; ) #back-top a( width:55px; display:block; text-align:center; font:11px/100% Arial, Helvetica, sans-serif; text-transform:veľké písmená; text -decoration:none; background-color: transparent; -webkit-transition:1s; -moz-transition:1s; transition:1s; ) /* grafická šípka */ #back-top span( width:55px; height:1600px; display:block; margin-bottom:7px; background: url("../img/up-arrow.png") bez opakovania v strede dole; -webkit-transition:1s; -moz-transition:1s; transition:1s ; ) #back-top a:hover span(background-color: rgba(0, 0, 0, 0,3);)

Z toho, čo stojí za zmienku, možno pomenovať hodnotu pevné za majetok pozíciu pri bloku #späť hore. To nám umožňuje opraviť polohu tlačidla vzhľadom na okno prehliadača.

Dnes si opäť zacvičíme s jQuery. Napíšeme skript pre plynulé posúvanie po stlačení tlačidla. Urobme to tak, že po kliknutí na tlačidlo sa používateľ plynulo presunie na požadovaný blok. Tento skript sa dá použiť na vytvorenie krásneho kotevného menu.

Tu je skript, ktorý budeme potrebovať.

Skript pozostáva z funkcie, ktorej jediným parametrom je premenná s hodnotou id bloku, v ktorom chcete vykonať plynulý prechod.

Vo vnútri funkcie je na prvom riadku vytvorená premenná offset s hodnotou 0.

animovať - ​​umožňuje vykonať vlastnú animáciu na základe zmeny CSS vlastnosti pre vybrané položky.

scrollTop – získa hodnotu rolovacej hornej výplne pre prvý prvok v množine.

Tam, kde stojí 1000, je uvedený čas trvania prechodu. Zmenou tohto času zrýchlite alebo spomalíte rolovanie.

Ako to funguje?

Napíšeme si testovací kód, na ktorom si náš skript vyskúšame v práci.

Požiadajte o telefonát!

Tu obyčajný HTML vzorka.

Aby skript fungoval, musíte zahrnúť knižnicu jquery.

Kvôli prehľadnosti som medzi testovanými prvkami urobil odrážku, aby sa zobrazil zvitok. Neobťažoval som sa vytváraním samostatného súboru pre štýly a všetko som napísal do značky head.

Požiadajte o telefonát!

V atribúte href označujeme blok, do ktorého potrebujeme prejsť, je to predpísané v prípade, že nefunguje plynulé posúvanie, aby sa užívateľ preniesol presne na vybraný blok. V udalosti onclick zadáme názov funkcie a ako parameter zadáme id bloku, na ktorý chceme plynulý prechod.