Cum de a face o defilare lină către locația dorită de pe pagina folosind jquery
Pentru a face mai clar, uita-te la un exemplu:
După cum se vede în acest exemplu, dacă faceți clic pe «Servicii» link-ul. Declanșat defilare automată, care ne mută la o listă dată, în acest caz Serviciile.
Cum funcționează
În principiu, nu există nimic complicat. Codul de referință atribuit clasei, urmată de presarea pentru a defila pentru a ne deplasa la destinație, locul trebuie să i se atribuie aceeași clasă ca referințele de cod. Numai de data aceasta cu ajutorul tag-uri
Apoi, JQuery (număr de cod) intră în script-ul de lucru. Sper că totul este în mod clar explicat :-) Dar totuși, să vedem cum arată în HTML:
Codul deja atribuit clasei:
cod html în cazul în care doriți să se mute în după ce faceți clic pe link-ul:
Dupa cum se poate observa că codul se referă la clasa
Acum, cel mai important lucru - este de a face pagina lin suluri la locația dorită. Și pentru a face acest lucru, vom fi folosind JQuery.
script JQuery
Script-ul, puteți adăuga etichetele
și . Sau copiați, creați un document text, introduceți-l acolo și păstrați-l cu rezoluția .js. Și apoi atașați-l astfel:În general, pe care o alegeți. Și acum, aici este și codul în sine JQuery:
Dacă aveți de gând să ceară un alt link-uri de cod de clasă, asigurați-vă că pentru a utiliza litere englezești, în caz contrar nu va funcționa.
Sasha, nu am primit ...
Vreau să fac referire nu de text și imagine. Eu fac site-ul odnostranichnik in Dreamweaver. Pune în ordine, desen butonul (care ar trebui să servească drept referință), apoi codul generat în programul introduce un link. Bănuiesc că școala este aici, cel mai probabil, confuzia în codul.
Codul arata ca acest lucru:
Oh, în codul meu pe articolul dvs., puteți obține)))
(Paranteză deschisă) p align = »justifica» style = »font-size: 12pt; text-align: center; »lang =» ru-RU »xml: lang =» ru-RU »> Servicii>
Problemă rezolvată: atâta timp cât ați încercat să scrie cod, care a realizat glaf))) Deci, oricum - vă mulțumesc!
Multumesc pentru articol, dar toate la fel, astfel încât a fost confortabil și ușor de citit cred că ai nevoie pentru a face câteva ajustări minore. Eu, de exemplu, în mod accidental ajuns aici arată utilizatorul că unele lucruri sunt înșelătoare, și anume: o fraza de genul „kodu link-ul de clasă atribuit“ intră într-o stupoare chiar de dezvoltatori cu experiență, ca în acest exemplu, clasele nu apar - doar atributul link-uri [href = »# servicii»] și identificatorul de produs [id = »servicii»].
În ceea ce privește reprezentarea codului, acesta nu va funcționa fie, așa cum diferită de cea prezentată în exemplul, și anume, acesta trebuie să fie înfășurat într-
$ (Document) .ready (function () // codul aici ...
>);
Atunci într-adevăr va funcționa fără îndoială :) Succes :)
Și noroc utilizatorilor, care toate vor efectua bine :)
Webstyler, îmi pare rău, am o problemă cu valorile pe care le-am în nici un fel nu-mi amintesc :) Vă mulțumesc foarte mult!
Spune-mi cum să pună în aplicare următoarele - du-te la pagina și apoi se trece la un element cu un id
Doar se face referire la IDOM
Bine ai venit! Prompt n-sute cum se face acest lucru s-ar opri derularea în locațiile marcate pe pagină. Să aibă o pagină de mare. și în cazul în care conținutul de derulabilă care a ajuns la locul potrivit pentru a continua derularea nu a fost posibil. Multumesc anticipat!
Nu este posibil să nici măcar nu știu :(