Zde je obrovský seznam posuvných pluginů jQuery pro váš web. Různé rolovací triky k nám přišly ze zahraničí nedávno a obehnaly řadu moderních portálů a stránek, které se chtěly odlišit. Práce na vertikálním posouvání by mohla zlepšit konverze a nepochybně uživatelský dojem. Díky zajímavým přístupům JS + CSS3 můžete vylepšit rozhraní vašeho webu. Pokud přidáte trochu fantazie, můžete pro svůj web získat něco jedinečného z jakéhokoli pluginu. Koneckonců, každý web se snaží vyčnívat z šedé hmoty různé způsoby. Díky rolování lze některé stránky přenést na stránku s implementovaným pluginem, který zlepší příjem důležitá informace uživatel. Tato technologie nejlépe se hodí pro různá portfolia nebo předvádění produktů atd.

Pojďme rovnou k věci.

Mazaný

Sly je JavaScript knihovna pro vylepšené jednosměrné posouvání s podporou navigace prvků. Může být použit jako jednoduchá náhrada rolování, jako navigační nástroj nebo jako skvělé navigační a animační rozhraní pro paralaxní stránky.

jQuery ScrollPath

Toto je plugin pro definování vlastních cest posouvání.

Okna

Animovat posouvání

AnimateScroll je plugin jQuery, který vám umožňuje posouvat se na jakoukoli část stránky pouhým voláním funkce animatescroll() s id nebo třídou prvku, na který chcete přejít.

scrollme

Jak se stránka posouvá, ScrollMe může škálovat, otáčet, překládat a měnit průhlednost prvků na stránce. Je snadné jej nastavit a nevyžaduje jediný řádek javascriptu.

nalepovací

Jednoduchý plugin, který „připne“ prvek do horní části okna prohlížeče tak, že jej posouvá, přičemž jej má stále na očích. Tento plugin funguje na vícestránkových webech, ale má další funkce pro rozvržení s jedním pagerem.

posouvání bloku

posouvání bloku je plugin jQuery, který mění sadu prvků na bloky a vykresluje je jednu obrazovku po druhé. Cílem je rozdělit stránku na kousky pro lepší prezentaci a tok uživatelů. Scroll lock automaticky změní velikost stránky.

Starscroll

Vytvořit div jako pozadí... aktivovat plugin; animace posouvání. Plugin automaticky nastaví div, aby fungoval neviditelně.

rolovací paluba

scrollocue

scrollocue je zásuvný modul jQuery pro vytvoření jednoduchého autocue/teleprompter systému pro rolování řádků textu.

scrollorama

Stellar.js

Stellar.js je plugin jQuery, který poskytuje efekty paralaxního posouvání libovolnému prvku posouvání.

super svitek orama

Paralaxa

Responzivní 3D posouvání

jQuery Scrollify

Plugin jQuery, který vám pomůže posouvat a přichytávat sekce. Kompatibilní s Touch.

vivus.js

Vivus je odlehčená třída JavaScriptu (bez závislostí), která vám umožňuje animovat SVG tím, že jim dává schopnost kreslit.

jQuery SlimScroll

slimScroll je malý (4,6 kB) plugin jQuery, který transformuje jakýkoli div na rolovatelnou oblast s pěkným posuvníkem.

jQRangeSlider

jQuery pin

Chtěli jste někdy připnout něco na okraj textu? Už jste někdy potřebovali tenký přilnavý prvek, který zůstane na svém místě, když se posouváte dolů?

Pin jQuery tady pro pomoc! Vložte libovolný prvek do horní části kontejneru. Snadno jej vypněte pro menší velikosti obrazovky, kde není místo pro tento druh lumpáren.

Nekonečný AJAX rolování

Overscroll

Overscroll je plugin jQuery a polyfill pro styl posouvání Safari v mobilu. Je určen pro použití v desktopových prohlížečích s Nejnovější verze jQuery.

jQuery.localScroll

Parallax ImageScroll - jQuery Plugin

jQuery a plugin kompatibilní s amd pro vytvoření efektu paralaxy, jak je uvedeno na spotify.com.

fullPage.js

Lehký a snadno použitelný plugin pro vytváření rolovacích webových stránek na celou obrazovku (známých také jako jednostránkové weby, vstupní stránka), můžete také přidat několik vodorovných posuvníků do sekcí webu.

Parallax.js

Jarallax

Jarallax je open source JavaScriptová knihovna zdrojový kód, což zjednodušuje nastavení css na základě interakce. Jarallax usnadňuje vytváření webových stránek s paralaxním rolováním

jInvertScroll

jQuery fullContent.js

Celý obsah jQuery umožňuje plně vytvářet webové stránky.

jQuery Posouvání jedné stránky

Vytvořte web s posouváním po jedné stránce (web pro iPhone 5S) pomocí pluginu pro posun po jedné stránce.

jQuery Parallax Plugin

jQuery Parallax je skript, který simuluje efekt paralaxy, jak je vidět na nikebetterworld.com.

jquery.parallax.js

jquery.arbitrary-anchor.js

Portfoliojs

Portfoliojs je lehký plugin jQuery galerie pro vaše krásné obrázky s horizontálním posouváním, které podporuje prohlížeče pro stolní počítače, tablety a mobilní zařízení.

Rolovací paralaxní plugin

Rolovací paralaxa je nový plugin jQuery, který spojuje efekt paralaxy s posuvníky a kolečkem myši. To dovoluje obrázek na pozadí nebo cokoli jiného, ​​abyste mohli rolovat jiným tempem než webová stránka, když uživatel roluje. Výsledný efekt paralaxy je snadný způsob, jak vytvořit iluzi hloubky na vašem webu.

rolovací záložka

rolovací

scrollr

Samostatná paralaxní rolovací knihovna pro mobilní zařízení(Android + iOS) a PC. Žádné jQuery. Jen obyčejný JavaScript (a nějaké kouzlo).

SMINT

Smint je jednoduchý plugin jQuery, který pomáhá s navigací na jednostránkových webech.

Vlastní posuvník obsahu jQuery

Vysoce přizpůsobitelný posuvný plugin jQuery. Mezi funkce patří svislý a/nebo vodorovný posuvník, vlastní hybnost posouvání, kolečko myši (prostřednictvím pluginu jQuery kolečko myši), podpora klávesnice a Dotyková obrazovka připravené k použití motivů a přizpůsobení pomocí CSS, podpora pro směr RTL, nastavení možností pro plnou kontrolu funkcí posouvání, způsoby spouštění akcí jako posouvání, aktualizace, zničení atd.

Zásuvný modul ScrollUp Bar

Zásuvný modul scroll up (jQuery) skryje horní lištu při rolování dolů a zobrazí ji při rolování nahoru. To je užitečné zejména pro mobilní rozhraní ušetřit drahocenný prostor.

StickyTableHeaders

jQuery panelSnap

isInViewport.js

vodopád

plugin jquery vodopád, jako jsou Pinterest, huaban.com, faxianla.com

scroller

jQuery.SerialScroll

jscroll

jscroll je plugin pro nekonečné posouvání jQuery, který napsal Philip Klausinsky. Nekonečný svitek; také známý jako líné načítání, nekonečné posouvání, autopirace, nekonečné stránky atd.

FoldScroll

plugin scrollUp jQuery

posunout nahoru je lehký plugin jQuery pro vytvoření vlastní funkce Scroll Up, která bude snadno fungovat s jakýmkoli webem.

multiScroll.js

Vytvořte rozdělené stránky se dvěma vertikálními posuvníky. Kompatibilní s mobilní telefony a zařízení a staré bowsery jako IE 8.

Libovolný posuvník seznamu

qpScroll

qpScroll je plugin jQuery, který vytváří pozadí paralaxy pro jakoukoli stránku nebo div. Nastavení je velmi snadné. Lze jej přidat na jakoukoli existující stránku, aniž by bylo nutné měnit označení HTML.

jQuery Stick 'em

Parallax.js

Paralaxní motor reaguje na orientaci chytrého zařízení. Tam, kde není gyroskop nebo hardware detekce pohybu, se místo toho použije pozice kurzoru.

Slinky.js

Slinky.js je plugin jQuery pro vytváření krásných rolovacích navigačních seznamů s překrývajícími se názvy.

Infinity.js

Infinity.js je UITableView pro web: urychluje procházení dlouhými seznamy a udržuje vaše nekonečné zdroje plynulé a stabilní pro vaše uživatele. Je malý, časem prověřený a vysoce účinný.

Libovolná kotva

Trasové body

Trasové body je knihovna, která usnadňuje spuštění funkce, kdykoli přejdete na prvek.

jQuery.kinetic

Posouvání ukazatele průběhu

V tomto smyslu existují dvě složky. Obsah a bary. Každá sekce obsahu má ID, které pomáhá vypočítat procento. Každý pruh má odkaz pro plynulé rolování do dané sekce.

jQuery Smooth Div Scroll

Plynulé posouvání Div je plugin jQuery, který posouvá obsah vodorovně doleva nebo doprava.

Příběh jQuery

Jednoduchý plugin jQuery rozšiřující plugin animateScroll o možnosti jedné stránky.

jQuery Animation Scroll Plugin

jQuery.ScrollTo

Plugin jQuery Endless Scroll

Nekonečné posouvání (neboli nekonečné posouvání) je oblíbená technika mezi weby 2.0, jako je Google Reader a Live Image Search, kde místo procházení prvků pomocí tradiční techniky stránkování stránka jednoduše načítá nové prvky připojené ke konci.

Během několika posledních let se popularita jednostránkových (rolovacích) stránek vážně zvýšila. Ačkoli tento druh stránky a ne pro každého je stále užitečné vědět, jak fungují. Dnes ukážu jak vytvořit jednoduchý jednostránkový (rolovací) web pomocí jQuery.

Než začneme, můžete se podívat na Demo.

No, začněme...

Vytvoříme následující:

HTML

Označení (HTML) stránky bude extrémně jednoduché.

Nejprve vytvoříme navigaci.

Co jsme udělali: prvek nav má šířku 100 % , takže jeho šířka bude rovna šířce nadřazený prvek. U nav je vlastnost position nastavena na fixed , takže při rolování stránky bude prvek nav vždy před očima uživatele. Abychom vytvořili navigaci, umístili jsme značku ul do značky nav.

výhody:

1. Pokud má uživatel vypnutý javascript, odkazy stále fungují.
2. V nápověda jQuery budeme číst atribut href z každého odkazu.

Nyní, když jsme vytvořili jednoduchý navigační panel, můžeme přejít k hlavnímu obsahu stránky.

Jak vidíte, značení je velmi jednoduché. Skládá se z bloku obsahu, který obsahuje odstavce (p). Každý odstavec má své ID spojené s odkazem v naší navigaci.

css

Než budete pokračovat s CSS, nezapomeňte zahrnout . Odstraňuje problémy spojené s nekompatibilitou mezi různými prohlížeči a umožňuje vám pracovat bez přemýšlení o tom, zda bude web vypadat stejně ve všech moderních prohlížečích.

Začněme stylizací hlavního obsahu stránky, která je velmi jednoduchá.

Body ( 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 ( margin-bottom: 25px; )

V těle definujeme barvy textu a pozadí; blok obsahu je 500 pixelů široký a vycentrovaný. Hodnota pro padding-top bloku obsahu je 40px – to je provedeno tak, aby navigace neblokovala horních 40px obsahu. Výška je 2000 pixelů, aby se vešla do obsahu a zobrazovalo posouvání. I když to zpravidla není nutné. Každý odstavec má spodní okraj 25 pixelů, takže můžete vidět, kde končí jeden odstavec a kde začíná druhý.

Nyní přejdeme k navigaci:

Nav ( šířka: 100 %; pozice: pevná; výška: 40px; pozadí: bílá; okraj: 1px plný #CACACA; border-top: žádný; -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 ( šířka: 750px; margin: 0 auto; ) nav ul li( plovoucí: vlevo; šířka: 150px; zarovnání textu : center; ) nav ul li a ( výška řádku: 40px; font-size: 16px; text-decoration: none; color: #515151; border-bottom: 1px tečkované #515151; ) nav ul li a:hover( color : #000 ;)

Chcete-li, aby navigace pokrývala celou šířku prohlížeče, nastavte její šířku na 100 % . Aby navigace zůstala na obrazovce při rolování, má deklaraci position:fixed. Výška je 40 pixelů, což je u horizontály zcela běžné horní menu. Pro roztomilý vzhled byl použit jednoduchý styl. ul je vystředěný a 750px široký, takže každý odkaz má dostatek místa. Každá li je plovoucí, takže všechny odkazy jsou na stejné lince. Nakonec je odkazům přiřazen také jednoduchý styl.

jQuery

Funguje to takto: když kliknete na navigační odkaz, posune se na odstavec, na který odkaz ukazuje.

Jako vždy začneme funkcí document.ready

$(dokument).připraveno(funkce()());

Nyní, než přejdeme k funkci kliknutí, napíšeme funkci scrollToDiv, která bude rolovat k bloku, který jsme vybrali. Budou zde 2 parametry – prvek, na který se má rolovat, a výška navigační lišty v horní části stránky.

Funkce scrollToDiv(element,navheight)( )

Nyní si popíšeme tři proměnné, budeme je potřebovat pro přesné rolování.

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

Proměnný offset je offset prvku. Používá ji proměnná offsetTop k vytažení hodnoty top . V důsledku toho získáme vzdálenost od horní části stránky k prvku. Proměnná totalScroll je zodpovědná za vzdálenost, kterou prohlížeč potřebuje k posouvání stránky. Bez horní panel navigace, bude hodnota rolování rovna hodnotě offsetTop. Při výpočtu proměnné totalScroll si však musíme pamatovat, že náš navigační panel blokuje horních 40 pixelů obsahu. Zde nám pomůže parametr navheight.

Nakonec posuňte stránku:

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

Funkce jQuery animate nám umožní implementovat plynulé rolování na požadované místo na stránce. V tomto případě trvá animace 500 milisekund.

Vlastnost scrollTop umožňuje nastavit míru, o kterou chcete stránku posouvat (vertikálně).

Zde je kompletní funkce scrollToDiv:

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

Přejděme k funkci klikání.

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

Toto je jen kostra funkce kliknutí. Deklarování return false na konci zabrání prohlížeči následovat odkaz.

Než budeme moci předat prvek funkci, musíme pro ni najít název.

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

Proměnná el obsahuje hodnotu atributu href. Aby jQuery mohl používat proměnnou el, musí být zabalena do elWrapped . Následující kód jQuery nelze spustit:

#paragraph1.offset();

Ale dá se to udělat:

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

Proto je potřeba proměnná elWrapped.

Plná funkce kliknutí:

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

To je vše - nyní máme jednoduchý stránka s odkazy, na které se po kliknutí posune na požadovanou část stránky.

Dobrý den, přátelé. V tomto článku budeme analyzovat událost jQuery při rolování stránky na konkrétní prvek. Jinými slovy tedy. V tomto příkladu spustíme událost, když se stránka posune do zápatí. Poté zobrazíme malé vyskakovací okno s hladkým vzhledem. A kliknutím také zavřeme. Co do něj dát, rozhodněte se sami, možností je spousta. Vypadá to takto:

Začněme se značkami HTML a zde není nic neobvyklého. Vše je celkem jednoduché a jasné. Velké plátno textu, v dolní části zápatí a blok s tlačítkem, které se objeví. Zde je kód bloku:

1 2 3 4 5 6 7 8 9 10

<html > <tělo> Spousta obsahu zde...<div id="blok"> Nějaký text.<input type = "button" class = "but" value = "(!LANG:Close" / > !} </div> <div id="footer"> zápatí</div> </body> </html>

Spousta obsahu zde...

Nyní ozdobíme náš skrytý blok a jeho tlačítko:

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 : ukazatel ; padding : 5px 10px ; margin-top : 10px ; font-weight : bold ;)

#block( displej: žádné; pozice: pevná; nahoře: 15px; vpravo: 15px; barva: #fff; pozadí: #4CAF50; odsazení: 10px; okraj-poloměr: 5px; šířka: 200px; stínovaný rámeček: 0 13px 20px -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; horní okraj: 10px; váha písma: tučné; )

Nyní se pojďme zabývat přímo tím, co se nazývá scroll to element. Ještě pořád anglický jazyk potřebné pro vývojáře. Standardně zahrňte jQuery. Udělám to přes CDN, protože to bude nejaktuálnější verze.

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

A pak samotný kód skriptu, který na stránce vytvoří kouzlo:

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 (funkce () ( var scroll = $(window) .scrollTop () + $(okno).vyska () ; //Pokud se posunete na konec prvku //var offset = $element.offset().top + $element.height(); //Pokud přejděte na začátek prvku var offset = $element.offset () .top if (scroll > offset && counter == 0 ) ( $("#block" ) .fadeIn (500 ) ; counter = 1 ; ) ) ) ; $(".btn" ) .click (funkce () ( $("#blok" ) .slideUp () ; ) ); ));

$(document).ready(function()( var $element = $(".footer"); nechť čítač = 0; $(window).scroll(function() ( var scroll = $(window).scrollTop() + $(window).height(); //Pokud přejděte na konec prvku //var offset = $element.offset().top + $element.height(); //Pokud přejděte na začátek prvku element var offset = $element .offset().top if (scroll > offset && counter == 0) ( $("#block").fadeIn(500; counter = 1; ) )); $(".btn ").click(funkce ()( $("#blok").slideUp(); )); ));

Ve výchozím nastavení se událost spustí, jakmile se zobrazí začátek prvku, v tomto případě zápatí, ale hodnotu můžete změnit zrušením komentáře na řádku 7 a poté se funkce spustí, když posun dosáhne konce prvku .

Tímto ošemetným způsobem můžete návštěvníkům svého webu ukázat svou jedinečnou nabídku a přidáním cílů do metriky sledovat její konverzi.

Reg.ru: domény a hosting

Největší registrátor a poskytovatel hostingu v Rusku.

V provozu je více než 2 miliony doménových jmen.

Propagace, mail pro doménu, řešení pro podnikání.

Již si vybralo více než 700 tisíc zákazníků po celém světě.

Bootstrap Framework: Rychle reagující rozvržení

Video kurz krok za krokem o základech adaptivní rozložení v rámci Bootstrap.

Naučte se sázet jednoduše, rychle a efektivně pomocí výkonného a praktického nástroje.

Nalíčte se na objednávku a získejte peníze.

*Přejetím myší pozastavíte rolování.

Zpět dopředu

Plynulé posouvání stránky nahoru pomocí jQuery

V tomto videu rozebereme takový moment, jako je vytvoření hladkého posunu stránky nahoru při kliknutí na odkaz.

Když jste blíže ke konci stránky, je často vhodné použít odkaz „Zpět na začátek“.

Tuto funkci je možné implementovat čistě pomocí HTML a CSS, ale v tomto videu vám ukážu, jak můžete tuto funkci vylepšit a zpříjemnit pomocí knihovny jQuery.

JavaScript nám umožní zajistit plynulý pohyb ze spodní části stránky nahoru a vyhnout se „skoku“, ke kterému dochází při použití běžné „kotvy“.

Objeví se pouze tehdy, když se stránka posune dolů o určitý počet pixelů, který si můžete sami nastavit.

To je také velmi výhodné, protože to člověka upozorní na interaktivní prvek na stránce a všimne si, že existuje příležitost takovou funkci použít.

Ukázka scénáře a podrobná analýza Podívejte se na kód ve videu níže.

Stručný přehled lekce (všechny podrobnosti viz video):

index.html

1. První co potřebujeme, je soubor, který bude obsahovat samotný odkaz "Zpět na začátek". Nech to být index.html.

Aby vše fungovalo, v sekci hlava dokumentu, musíme zahrnout soubor stylu a dva soubory JavaScript (více o nich později):

Nejprve zahrneme knihovnu jQuery, poté soubor script.js s kódem, který si sami napíšeme.

Také do tohoto souboru musíme umístit samotný odkaz, po kliknutí se plynule dostane do horní části stránky:

Horní

script.js

2. Za druhé je soubor script.js, do kterého zapisujeme funkce, které provádějí hlavní akce:

$(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; )); )); ));

Nejprve tedy počkáme, až se dokument plně načte, a skryjeme naše tlačítko "Zpět na začátek", aby nebylo zpočátku na stránce vidět.

Dále zachytíme událost posouvání okna, a pokud posun klesne o 700 pixelů nebo více, pak hladce zobrazíme tlačítko "Nahoru" pomocí metody fadeIn. Jinak to metodou skryjeme odeznít.

V druhé anonymní funkci sledujeme událost kliknutí na odkaz uvnitř bloku #zpět nahoru a aplikovat metodu animovat plynule vystoupat na začátek stránky (scrollTop:0) za 800 ms.

styl.css

3. A třetí je soubor stylu. V našem příkladu v něm není nic zbytečného, ​​takže existuje několik stylů:

Body ( font-size: 13px; line-height: 1,65em; font-family: Verdana, sans-serif; ) p ( margin-left: 150px; ) /* Horní tlačítko */ #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:velká písmena; text -decoration:none; background-color: transparent; -webkit-transition:1s; -moz-transition:1s; transition:1s; ) /* grafická šipka */ #back-top span( width:55px; height:1600px; display:block; margin-bottom:7px; background: url("../img/up-arrow.png") neopakovatelné dole uprostřed; -webkit-transition:1s; -moz-transition:1s; transition:1s ; ) #back-top a:hover span(background-color: rgba(0, 0, 0, 0.3);)

Z toho, co stojí za zmínku, lze jmenovat hodnotu pevný pro majetek pozice u bloku #zpět nahoru. To nám umožňuje opravit polohu tlačítka vzhledem k oknu prohlížeče.

Dnes si opět procvičíme s jQuery. Napíšeme skript pro plynulé rolování při stisku tlačítka. Udělejme to tak, že po kliknutí na tlačítko se uživatel plynule přenese požadovaný blok. Tento skript lze použít k vytvoření krásného kotevního menu.

Zde je skript, který budeme potřebovat.

Skript se skládá z funkce, jejímž jediným parametrem je proměnná s hodnotou id bloku, kde chcete provést hladký přechod.

Uvnitř funkce je na prvním řádku vytvořena proměnná offset s hodnotou 0.

animovat - umožňuje provést vlastní animaci na základě změny Vlastnosti CSS pro vybrané položky.

scrollTop – Získá hodnotu horního odsazení pro první prvek v sadě.

Kde stojí 1000, je uvedena doba trvání přechodu. Změnou tohoto času zrychlíte nebo zpomalíte rolování.

Jak to funguje?

Pojďme si napsat testovací kód, na kterém vyzkoušíme náš skript v práci.

Požádejte o telefonát!

Tady prostý HTML vzorek.

Aby skript fungoval, musíte zahrnout knihovnu jquery.

Také jsem pro přehlednost udělal mezi testovanými prvky odsazení, aby se zobrazil svitek. Neobtěžoval jsem se vytvářením samostatného souboru pro styly a vše jsem napsal do značky head.

Požádejte o telefonát!

V atributu href označujeme blok, do kterého potřebujeme provést přechod, to se zapíše v případě, že nefunguje plynulé rolování, aby se uživatel přenesl přesně na vybraný blok. V události onclick uvedeme název funkce a jako parametr uvedeme id bloku, na který chceme plynule přejít.