Meniul
AcasăRețea socială

Derulare lină la element - jQuery. Derularea la un element folosind jQuery. Tranziție lină atunci când faceți clic pe un buton Jquery derulați pagina la element

În ultimii ani, popularitatea site-urilor de o pagină (de defilare) a crescut considerabil. Deși acest tip de site nu este pentru toată lumea, este totuși util să știi cum funcționează. Astăzi vă voi arăta cum să creați un site web simplu de o pagină (defilare) folosind jQuery.

Înainte de a începe, puteți urmări demonstrația.

Ei bine, să începem...

Vom crea următoarele:

HTML

Marcajul (HTML) al paginii va fi extrem de simplu.

Mai întâi, să creăm navigarea.

  • Paragraful 1
  • paragraful 2
  • paragraful 3
  • paragraful 4
  • paragraful 5

Ceea ce am făcut este că elementul nav are o lățime de 100%, ceea ce înseamnă că lățimea sa va fi egală cu lățimea elementului părinte. Pentru nav, proprietatea de poziție este setată la fixed , așa că atunci când derulați pagina, elementul nav va fi întotdeauna în fața ochilor utilizatorului. Pentru a crea navigarea, am plasat eticheta ul în eticheta nav.

Avantaje:

  • Dacă utilizatorul are javascript dezactivat, linkurile încă funcționează.
  • Folosind jQuery vom citi atributul href de la fiecare link.

    • Acum că am creat o bară de navigare simplă, putem trece la conținutul principal al paginii.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit...

    In ut sapien sem, a convallis odio. Aenean consequat ornare egestas...

    Donec sodales diam et libero ultrices ornare...

    Phasellus dolor sem, pharetra nec scelerisque sit amet, consequat quis dolor...

    Proin varius pellentesque velit, at consequat risus hendrerit quis...

    După cum puteți vedea, marcajul este extrem de simplu. Este format dintr-un bloc de conținut care conține paragrafe (p). Fiecare paragraf are propriul id asociat cu un link în navigarea noastră.

    CSS

    Înainte de a începe cu CSS, nu uitați să includeți . Elimină problemele asociate cu incompatibilitatea între browsere și vă permite să lucrați fără să vă întrebați dacă site-ul va arăta la fel în toate browserele moderne.

    Să începem cu stilizarea conținutului principal al paginii, care este foarte simplu.

    Corp ( font-family: arial; font-size: 15px; line-height: 25px; culoare: #515151; fundal: #fdfdfd; ) #conținut ( lățime: 500px; margine: 0 automat; padding-top: 40px; înălțime : 2000px; ) #conținut p ( margine-jos: 25px; )

    În corp definim textul și culorile de fundal; Blocul de conținut are o lățime de 500 px și este centrat. Valoarea padding-top pentru blocul de conținut este de 40px - acest lucru se face astfel încât navigarea să nu blocheze primii 40px ai conținutului. Înălțimea este de 2000 px pentru a se potrivi conținutului și a afișa derularea. Deși, de regulă, acest lucru nu este necesar. Fiecare paragraf are o proprietate margine de jos de 25 px pentru a vă ajuta să înțelegeți unde se termină un paragraf și unde începe altul.

    Acum să trecem la navigare:

    Nav ( lățime: 100%; poziție: fix; înălțime: 40px; fundal: alb; chenar: 1px solid #CACACA; margine-top: niciunul; -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 ( width: 750px; margin: 0 auto; ) nav ul li( float: left; width: 150px; text-align : centru; ) nav ul li a ( line-height: 40px; font-size: 16px; text-decoration: none; culoare: #515151; chenar-bottom: 1px punctat #515151; ) nav ul li a:hover( color : #000;)

    Pentru a vă asigura că navigarea ocupă întreaga lățime a browserului, valoarea lățimii acestuia este de 100%. Pentru a menține navigarea pe ecranul monitorului la derulare, are o declarație poziție:fixă. Înălțimea este de 40 px, ceea ce este destul de normal pentru un meniu de sus orizontal. Un stil simplu a fost folosit pentru a da un aspect drăguț. ul este centrat și 750px lățime pentru a oferi fiecărui link suficient spațiu. Fiecare li este proiectat să plutească, astfel încât toate legăturile sunt pe aceeași linie. În cele din urmă, link-urilor primesc și un stil simplu.

    jQuery

    Iată cum va funcționa: când faceți clic pe un link de navigare, acesta va derula la paragraful către care indică linkul.

    Ca întotdeauna, să începem cu funcția document.ready

    $(document).ready(funcție())( ));

    Acum, înainte de a trece la funcția de clic, să scriem o funcție scrollToDiv care va derula la blocul pe care l-am selectat. Vor exista 2 parametri - elementul la care se efectuează derularea și înălțimea barei de navigare din partea de sus a paginii.

    Funcția scrollToDiv(element,navheight)( )

    Acum descriem trei variabile; vom avea nevoie de ele pentru o defilare precisă.

    Funcția scrollToDiv(element,navheight)( var offset = element.offset(); var offsetTop = offset.top; var totalScroll = offsetTop-navheight; )

    Variabila offset este offset-ul elementului. Acesta este folosit de variabila offsetTop pentru a prelua valoarea top . Ca rezultat, obținem distanța de la partea de sus a paginii la element. Variabila totalScroll este responsabilă pentru distanța de care are nevoie browserul pentru a derula pagina. Fără bara de navigare de sus, cantitatea de defilare va fi egală cu valoarea offsetTop. Cu toate acestea, atunci când calculăm variabila totalScroll, trebuie să ne amintim că bara noastră de navigare blochează primii 40 px de conținut. Parametrul navheight ne va ajuta aici.

    În cele din urmă, să derulăm pagina:

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

    Funcția jQuery animate ne va permite să implementăm derularea lină la locația dorită de pe pagină. În acest caz, animația durează 500 de milisecunde.

    Proprietatea scrollTop vă permite să setați cantitatea cu care doriți să defilați pagina (vertical).

    Iată funcția completă scrollToDiv:

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

    Să trecem la funcția de clic.

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

    Acesta este doar un schelet al funcției de clic. Declararea returnării false la sfârșit va împiedica browserul să urmărească linkul.

    Înainte de a transmite un element unei funcții, trebuie să-i găsiți un nume.

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

    Variabila el conține valoarea atributului href. Pentru ca jQuery să folosească variabila el, aceasta trebuie să fie încapsulată în elWrapped. Următorul cod jQuery nu poate fi executat:

    #paragraf1.offset();

    Dar poate face asta:

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

    Acesta este motivul pentru care este necesară variabila elWrapped.

    Funcția de clic complet:

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

    Asta este - acum avem un simplu o pagină cu linkuri care, atunci când se face clic, derulează la partea dorită a paginii.



    derulare jquery (21)

    Am scris o funcție de uz general care derulează printr-un obiect jQuery, selector CSS sau valoare numerică.

    Exemplu de utilizare:

    // derulați la "#target-element": $.scrollTo("#target-element"); // derulați la 80 de pixeli deasupra primului element cu clasa „.invalid”: $.scrollTo(”.invalid”, -80); // derulează un container cu id-ul „#my-container” la 300 de pixeli din partea de sus: $.scrollTo(300, 0, „slow”, „#my-container”);

    Codul funcției:

    /** * Derulează containerul la poziția țintă minus offset-ul * * @param target - destinația la care să derulezi, poate fi un obiect jQuery * selector jQuery sau poziția numerică * @param offset - decalajul în pixeli față de țintă poziție, de ex. * trece -80 pentru a derula la 80 de pixeli deasupra țintei * @param speed - viteza de defilare în milisecunde sau unul dintre * șirurile „rapid” sau „lent”. implicit: 500 * @param container - un obiect jQuery sau un selector pentru * container care urmează să fie derulat. implicit: „html, corp” */ jQuery.scrollTo = funcție (țintă, offset, viteză, container) ( dacă (isNaN (țintă)) ( dacă (! (instanță țintă a jQuery)) țintă = $ (țintă); țintă = parseInt(target.offset().top); ) container = container || "html, body"; if (!(container instanceof jQuery)) container = $(container); viteza = viteza || 500; offset = offset | | 0; container.animate(( scrollTop: target + offset ), viteza); );

    Am acest element de intrare:

    Apoi am și alte elemente precum alte intrări de text, câmpuri de text etc.

    Când utilizatorul face clic pe această intrare cu #subject , pagina ar trebui să deruleze la ultimul element al paginii cu o animație frumoasă. Ar trebui să fie un defilare în jos și nu în sus.

    Ultimul articol de pe pagină este butonul de trimitere cu #submit:

    Animația nu trebuie să fie prea rapidă și trebuie să fie fluidă.

    Rulez cea mai recentă versiune de jQuery. Prefer să nu instalez niciun plugin, ci mai degrabă să folosesc funcțiile jQuery implicite pentru a realiza acest lucru.

    Când utilizatorul face clic pe această intrare cu #subject, pagina ar trebui să deruleze la ultimul element al paginii cu o animație frumoasă. Ar trebui să fie un defilare în jos și nu în sus.

    Ultimul element al paginii este un buton de trimitere cu #submit

    $("#subiect").click(function() ( $("#submit").focus(); $("#subiect").focus(); ));

    Mai întâi derulați în jos până la #trimite, apoi #trimiteți cursorul pe intrarea pe care s-a făcut clic, ceea ce simulează derularea în jos și funcționează în majoritatea browserelor. De asemenea, nu necesită jQuery, deoarece poate fi scris în JavaScript pur.

    Ar putea acest mod de utilizare a funcției de focalizare să simuleze mai bine animația, prin înlănțuirea apelurilor la focalizare. Nu am testat această teorie, dar ar arăta cam așa:

    #F > * ( lățime: 100%; ) .. .. .. .. $("#child_N").click(function() ( $("#child_N").focus(); $("#child_N") +1").focus(); .. $("#copil_K").focus(); $("#copil_N").focus(); ));

    jQuery(document).ready(function($) ( $("a").bind("click.smoothscroll",function (e) ( e.preventDefault(); var target = this.hash, $target = $( target); $("html, body").stop().animate(( "scrollTop": $target.offset().top-40 ), 900, "swing", function () ( window.location.hash = tinta; )); )); ));

    • Sectiunea 1
    • Sectiunea 2
    • Secțiunea 3

    Animatii:

    // glisează în partea de sus a paginii $(".up").click(function () ( $("html, body").animate(( scrollTop: 0 ), 600); return false; )); // glisează pagina pentru a ancora $(".menutop b").click(function())( //event.preventDefault(); $("html, body").animate(( scrollTop: $($(this)) . attr("href")).offset().top ), 600); return false; )); // Derulați la clasă, div $("#button").click(function() ( $("html, body").animate(( scrollTop: $("#target-element").offset().top ), 1000); )); // animație de fundal div $(window).scroll(funcție () ( var x = $(this).scrollTop(); // îngheța fundalul div $(".banner0").css("poziție-fond", " 0px " + x +"px"); // de la stânga la dreapta $(".banner0").css("background-position", x+"px " +"0px"); // de la dreapta la stânga $( ".banner0").css("poziție de fundal", -x+"px " +"0px"); // de jos în sus $("#skills").css("poziție de fundal", "0px " + -x + "px"); // mută fundalul de sus în jos $(".skills1").css("background-position", "0% " + parseInt(-x / 1) + "px" + ", 0% " + parseInt(-x / 1) + "px, center top"); // Afișează hide mtop menu if (x > 100) ( $(".menu").addClass("menushow"); $(".meniu").fadeIn("lent"); $(".meniu").animate((opacitate: 0,75), 500); ) else ( $(".meniu").removeClass("meniu arată" ); $(".meniu").animate((opacitate: 1), 500); ) )); // bara de progres animație simplă $(".bar1").each(function(i) ( var width = $(this).data("width"); $(this).animate(("width" : width + "%" ), 900, function())( // Animație finalizată )); ));

    Aceasta este abordarea mea, prin abstracția ID-urilor și a href-urilor folosind un selector de clasă universal

    $(function() ( // Selector generic pentru a fi folosit oriunde $(".js-scroll-to").click(function(e) ( // Obțineți href în mod dinamic var destinație = $(this).attr(" href"); // Împiedică linkul href=“#” să schimbe hash-ul URL (opțional) e.preventDefault(); // Animați derularea către destinația $("html, body").animate(( scrollTop: $(destinație) ).offset().top ), 500); )); ));

    • Punctul 1
    • Punctul 2
    • Punctul 3

    Folosind acest script simplu

    If($(window.location.hash).length > 0)( $("html, body").animate(( scrollTop: $(window.location.hash).offset().top), 1000); )

    Ce aș face în sortare este că, dacă o etichetă hash este detectată în URL, scrollTo își anime ID-ul. Dacă eticheta hash nu este găsită, ignorați scriptul.

    Var scrollTo = function($parent, $element) ( var topDiff = $element.position().top - $parent.position().top; $parent.animate(( scrollTop: topDiff ), 100); );

    Dacă nu vă pasă prea mult de efectul de defilare lină și sunteți doar interesat să defilați la un anumit element, nu aveți nevoie de o funcție jQuery pentru a face acest lucru. Javascript are treaba ta:

    Deci tot ce trebuie să faci este: $("selector").get(0).scrollIntoView();

    Get(0) este folosit pentru că dorim să obținem elementul JavaScript DOM, nu elementul JQuery DOM.

    Dacă gestionați doar derularea la un element de intrare, puteți utiliza focus() . De exemplu, dacă doriți să defilați la prima intrare vizibilă:

    $(":input:visible").first().focus();

    Sau prima intrare vizibilă în container cu clasa .error:

    $(".error:input:visible").first().focus();

    Mulțumim lui Tricia Ball pentru asta!

    Mod ușor de a realiza derularea paginii pentru id-ul div țintă

    Var targetOffset = $("#divID").offset().top; $("html, body").animate((scrollTop: targetOffset), 1000);

    $("html, body").animate(...) nu este pentru mine pe iphone, browser-ul Chrome.

    Aveam nevoie să personalizez elementul de conținut țintă de pe pagină.

    $(„#Conținut”). Animați (...)

    Cu asta am ajuns

    Dacă (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) ( $("#conținut").animate(( scrollTop: $("#elementtoScrollToID").offset().top ), "lent"); ) else( $("html, corp").animate(( scrollTop: $("#elementtoScrollToID").offset().top ), "lent"); )

    Tot conținutul corpului este conectat folosind #content div

    .... ....

    Presupunând că aveți un buton cu un ID de buton, încercați acest exemplu:

    $("#button").click(function() ( $().animate(( scrollTop: $("#elementtoScrollToID").offset().top ), 2000); ));

    Am scris acest plugin ușor pentru a ușura derularea paginii/elementelor. Este flexibil în cazul în care puteți trece în elementul țintă sau valoarea dată. Poate că aceasta ar putea face parte din lansarea oficială a jQuery, ce părere aveți?

    Exemple de utilizare:

    $("corp").scrollTo("#țintă"); // Derulați ecranul la elementul țintă $("body").scrollTo(500); // Derulează ecranul cu 500 de pixeli în jos $("#scrollable").scrollTo(100); // Derulați elementul individual cu 100 de pixeli în jos

    Opțiuni:

    scrollTarget: un element, o linie sau un număr care indică poziția de defilare dorită.

    offsetTop: un număr care specifică spațiul suplimentar deasupra scrollului.

    durată: Un șir sau un număr care specifică cât timp va dura rularea animației.

    relaxarea: Un șir care indică ce funcție de atenuare trebuie utilizată pentru tranziție.

    complet: O funcție de apelat după finalizarea animației.

    Pentru a afișa elementul complet (dacă este posibil cu dimensiunea actuală a ferestrei):

    Var element = $("#some_element"); var elementHeight = element.height(); var windowHeight = $(window).height(); var offset = Math.min(elementHeight, windowHeight) + element.offset().top; $("html, body").animate(( scrollTop: offset ), 500);

    De mult a prins rădăcini printre dezvoltatori.
    Asa de. Cu ajutorul pluginurilor prezentate în această colecție, puteți crea un site web modern, cu o dinamică excelentă. Cred că fiecare persoană care este interesată de dezvoltarea site-ului web a văzut aceste plugin-uri în acțiune. Când derulați pagina, blocurile, diferitele elemente sau text apar fără probleme, mutați-vă, rotiți, etc. După cum arată practica, clienților le plac foarte mult astfel de lucruri fanteziste.
    Implementarea efectelor de defilare pe o pagină nu este atât de dificilă pe cât ar părea la prima vedere. Tot ce aveți nevoie este un plugin de înaltă calitate și mâini directe. Desigur, un designer de layout novice poate întâmpina dificultăți, dar dacă stați o vreme, înțelegeți principiile de funcționare, sarcina va părea foarte simplă.
    În ciuda faptului că multor oameni le place animația de pe site, nu ar trebui să exagerați, altfel veți ajunge cu o pagină supraîncărcată, prost percepută vizual, în care toată atenția va fi concentrată pe toate aceste „fluiere”, și nu pe informații. care trebuie transmis vizitatorului . În plus, cu cât sunt conectate mai multe scripturi, cu atât pagina funcționează mai lent. În browserele mai vechi, s-ar putea să nu funcționeze deloc. Conectați cu înțelepciune efectele. Adesea, un simplu aspect neted, discret al blocurilor este suficient. Acest efect oferă paginii netezime și dinamică, făcând site-ul viu. În practica mea, am văzut o mulțime de site-uri cu efecte fără simțul proporției. Acest lucru îmi face rău - singurul sentiment care apare. Dar, probabil, dezvoltatorii sperau la un „efect Wow”. Asa de. Folosește totul cu înțelepciune și cu moderație!
    Toate pluginurile sunt absolut gratuite, dar aș recomanda să vă familiarizați cu licențele, deoarece în unele cazuri trebuie să îndepliniți o serie de condiții pentru a le utiliza în scopuri comerciale.

    WOW.jsUn plugin bun pentru implementarea animației elementelor la derulare. Are o mulțime de opțiuni de apariție a blocurilor animate și este destul de ușor de personalizat. ScrollMagic Un alt plugin popular cu ajutorul căruia poți implementa animații complexe care se vor declanșa atunci când ruloul mouse-ului se derulează. În acest caz, pluginul vă permite să creați efecte de mișcare cu adevărat complexe, schimbând fundalul paginii și, în general, deformând forme. ScrollMagic este adesea folosit pe site-urile promoționale care necesită multă animație.

    ScrollmeUn plugin simplu și ușor cu care poți implementa o animație spectaculoasă atunci când derulezi. Puteți scala, roti, muta, reduce sau crește transparența oricărui element.

    Superscrollorama Superscrollorama este un plugin puternic, dar greu pentru crearea de animații de defilare. Arsenalul său include multe setări diferite pentru animarea textului, elemente DIV individuale, inclusiv efecte.
    Informații mai detaliate pot fi găsite în documentația pentru acest plugin jQuery.

    onScreen este un plugin excelent pe care îl folosim adesea în proiectele noastre. Vă permite să creați ușor și rapid diverse efecte pentru aspectul elementelor atunci când derulați o pagină. Pluginul este ușor și nu încarcă pagina.

    Pluginul OnePagejQuery OnePage vă permite să împărțiți o pagină în ecrane separate cu o înălțime de 100% și să animați tranziția prin ele. Este nevoie doar de un mic ghiont pentru a începe derularea la următorul ecran. Același efect a fost folosit și pe site-ul promoțional 5s.
    Există probleme cu, ca și cu aproape toate pluginurile similare. Dacă textul nu se potrivește în înălțime, este pur și simplu tăiat și bara de defilare nu apare.

    FSVS Funcționalitate foarte asemănătoare cu pluginul anterior. Vă permite să faceți derularea prin glisare pe ecrane folosind css3. Are o problemă similară la vizualizarea pe telefoane. Navigarea prin ecrane sub formă de diapozitive separate este posibilă fie folosind rola mouse-ului, fie făcând clic pe navigarea din partea cu puncte.

    jInvertScrolljInvertScroll vă permite să creați o defilare cu paralaxă orizontală. În timp ce rotiți rola mouse-ului în jos, toate elementele de pe pagină se mișcă orizontal și cu viteze diferite, ceea ce creează un efect de paralaxă.

    WaypointsWaypoints este un plugin jQuery care vă permite să afișați orice element atunci când vizitatorul se află într-un anumit punct al paginii. De exemplu, atunci când un vizitator termină de citit un articol de pe un site web și se apropie de sfârșitul textului, o fereastră de informații apare în partea laterală a paginii care îi cere să citească următorul articol sau un articol similar.

    Plugin ScrollocueOriginal pentru sarcini specifice. Vă permite să vă deplasați prin pagină selectând blocuri prin simplu clic dreapta pe pagină. Cu fiecare clic nou, elementul de mai jos este evidențiat, derulând astfel puțin pagina. Derularea cu tastele săgeți de pe tastatură este, de asemenea, acceptată.

    Scrolling Progress BarO soluție interesantă cu care puteți afișa progresul citirii informațiilor pe o pagină. De asemenea, este posibil să împărțiți textul în secțiuni și toate acestea vor fi afișate vizual în orice loc convenabil pentru dvs. de pe pagină.

    multiScroll.jsmultiScroll.js este un plugin jQuery similar celor două pluginuri anterioare cu ecran glisant, dar are o diferență semnificativă. Dacă în cazurile anterioare ecranul a fost pur și simplu răsturnat, atunci acesta este mai mult ca un glisor de imagine modern. Ecranul este împărțit în două părți egale, iar cea din stânga se derulează în sus și cea din dreapta în jos. În acest fel, conținutul este practic sfâșiat.
    Acest plugin poate fi folosit, de exemplu, pentru a crea un portofoliu pentru un fotograf sau designer. Cred că vizitatorii vă vor aprecia site-ul.

    browserSwipe.jsUn alt plugin de defilare pe ecran complet, cu ajutorul căruia creați o tranziție eficientă între ecrane. Efectele disponibile includ tranziție de alunecare, tranziție cu rotirea ecranului complet, zoom și defilare orizontală pe ecran. Puteți combina toate efectele pe o singură pagină.

    jQuery.panelSnap Plugin de defilare cu glisare pe ecran complet. La prima vedere, pluginul nu este diferit de cele anterioare, dar are o zonă internă de defilare. Dacă derulăm până la sfârșitul conținutului intern, atunci are loc automat trecerea la următorul ecran. Teoretic, aceasta este o soluție la problema pentru site-urile web receptive. Dacă fereastra interioară este realizată la dimensiune completă, pe ecranele mici conținutul care nu se potrivește în înălțime nu se va pierde.

    Bună prieteni. În acest articol, ne vom uita la evenimentul jQuery atunci când pagina derulează la un anumit element. Cu alte cuvinte, atunci... În acest exemplu, vom declanșa un eveniment atunci când pagina este derulată la subsol. Apoi vom afișa o mică fereastră pop-up cu un aspect neted. Și îl vom închide făcând clic. Decideți singur ce să puneți în el, există o mulțime de opțiuni. Cam asa arata:

    Să începem cu marcajul HTML și nu este nimic neobișnuit aici. Totul este destul de simplu și clar. O pânză mare de text, un subsol în partea de jos și un bloc cu un buton care va apărea. Iată codul de bloc:

    1 2 3 4 5 6 7 8 9 10 E mult conținut aici... Un text. Subsol

    E mult conținut aici... Un text. Subsol

    Acum să începem să proiectăm blocul nostru ascuns și butonul acestuia:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 #bloc (afișare: niciunul; poziție: fix; sus: 15px; dreapta: 15px; culoare: #fff; fundal: #4CAF50; umplutură: 10px; raza chenar: 5px; lățime: 200px; umbră casetă: 0 13px 20px -5px #3a3a3a ; font-family: Arial; text-align: center ; ) .btn( fundal : #FF9800 ; chenar : 2px solid #795548 ; culoare : #fff ; chenar-radius : 5px ; cursor : pointer ; padding : 5px 10px ; margin-top : 10px ; font-weight : bold ; )

    #block( afișare: niciunul; poziție: fix; sus: 15px; dreapta: 15px; culoare: #fff; fundal: #4CAF50; umplutură: 10px; chenar-rază: 5px; lățime: 200px; casetă-umbră: 0 13px 20px -5px #3a3a3a; font-family: Arial; text-align: center; ) .btn( fundal: #FF9800; chenar: 2px solid #795548; culoare: #fff; border-radius: 5px; cursor: pointer; padding: 5px 10px; margin-sus: 10px; font-weight: bold; )

    Acum să ne ocupăm direct de ceea ce se numește scroll to element. Cu toate acestea, engleza este necesară pentru un dezvoltator. Conectăm jQuery ca standard. Voi face acest lucru prin CDN, deoarece va fi cea mai actualizată versiune.

    Și apoi codul de script în sine, care va crea magie pe pagină:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 $(document).ready (funcție () ( var $element = $(".footer" ) ; let counter = 0 ; $(window).scroll (funcție () ( var scroll = $(window).scrollTop () + $(window) .height () ; //Dacă derulați până la sfârșitul elementului //var offset = $element.offset().top + $element.height(); //Dacă derulați până la începutul element var offset = $element .offset () .top if (defilare > offset && counter == 0 ) ( $("#block" ) .fadeIn (500 ) ; counter = 1 ; ) ) ; $(".btn" ) .click (funcție () ( $("#block" ) .slideUp () ; ) ) ; ) ) ;

    $(document).ready(function())( var $element = $(".footer"); let counter = 0; $(window).scroll(function() ( var scroll = $(window).scrollTop() ) + $(window).height(); //Dacă derulați până la sfârșitul elementului //var offset = $element.offset().top + $element.height(); //Dacă derulați până la începutul elementul var offset = $element .offset().top if (scroll > offset && counter == 0) ( $("#block").fadeIn(500); counter = 1; ) )); $(". btn").click(funcție ()( $("#block").slideUp(); )); ));

    În mod implicit, evenimentul este declanșat de îndată ce începutul elementului, în acest caz subsolul, apare în zona de vizibilitate, dar puteți modifica valoarea prin decomentarea liniei 7 și apoi funcția se va declanșa când scroll-ul ajunge la sfârșit. a elementului.

    Acesta este un mod inteligent de a le arăta vizitatorilor site-ului oferta dvs. unică și, adăugând obiective la valori, urmăriți conversia acesteia.