Så här länker du till specifika punkter i en sida och animerar rullningen

Du har sett det gjort innan du klickar på en länk i navigeringen och det tar dig inte till en annan sida utan en specifik punkt inom den aktuella sidan. Hur uppnås detta? Med lite extremt grundläggande HTML som du kan hämta på några sekunder!

För att ta det vidare kommer vi också att se hur man kan animera övergången med hjälp av en liten jQuery.

Intern länkning: The Gist

Som jag förklarade i introet, kommer vi idag att lära oss ett grundläggande knep och sedan se hur vi gör det ännu bättre. När jag först lärde mig webbdesign var detta ett av de saker som jag alltid berättade för mig själv. Jag behövde räkna ut men alltid släcka inlärning, om du befinner dig i samma båt, är den här artikeln för dig.

Live-demo: Klicka här

Ett tal av två länkar

Som du antagligen kan gissa, behöver du inte bara en länk till en intern sektion på din sida. Först vill du lägga till länken som ska fungera som ankaren för att bläddra till, då skapar du den standardklickbara länken som du normalt skulle och styr den vid den första länken. Vettigt? Om inte, oroa dig inte, det är lättare än du tror.

För det första säger vi att vi lägger en länk i en sidfot som rullar till toppen av sidan, en vanlig övning på längre sidor. För att infoga den här länken använder vi viss syntax som du kanske eller kanske inte är bekant med:

Tillbaka till toppen

Observera att istället för den typiska? A href?, Använde vi? Ett namn ?. Detta är viktigt och det är sannolikt att du blir snubblad om du är van vid att införa länkar med den tidigare. Du kan välja vad du vill ha för namnet, kom ihåg att det är bäst att använda något beskrivande som vi har gjort här. Se också till att du noterar namnet du använder, eftersom vi måste referera till det igen i nästa steg.

När du har den länken helt klar att gå, är det dags att sätta in ankret. I huvudsak, om du vill bläddra till en viss punkt på en sida måste du infoga en bit kod på den tiden så att länken vi just skapat vet vart du ska gå.

Eftersom vi vill länka till toppen av sidan, skulle vi infoga det här biten längst upp i vår HTML.

Det finns några viktiga saker att notera här. Först och främst lade vi till en hashtag till början av länknamnet. Detta visas inte i den första länken, men det är nödvändigt i det andra. Textdelen av den här länken har också lämnats tom. Detta är inte nödvändigt, men är faktiskt ett alternativ. Ofta kommer du nog inte att länka till ett element som redan finns i din layout så det kommer att vara innehåll här.

Bygga Demo

Nu när du förstår syntaxen är det dags att bygga en grundläggande webbsida med det vi har lärt oss. Självklart måste vi bygga en sida som är tillräckligt lång för att behöva bläddra. Låt oss börja med att kasta i några stora textblock, var och en med en egen rubrik.

<h1>Rubrik One</h1> <p>Vad är det med dig? </p> <h1>Rubrik två</h1> <p>Vad är det med dig? </p> <h1>Rubrik tre</h1> <p>Vad är det med dig? </p> <h1>Rubrik fyra</h1> <p>Vad är det med dig? </p>

De fyra rubrikerna bör ge oss fyra möjliga platser att bläddra till så vi är perfekt inställda! Härifrån vill vi lägga till h1-objekten i de angivna länkarna.

<h1>Rubrik One</h1> <p>Vad är det med dig? </p> <h1>Rubrik två</h1> <p>Vad är det med dig? </p> <h1>Rubrik tre</h1> <p>Vad är det med dig? </p> <h1>Rubrik fyra</h1> <p>Vad är det med dig? </p>

Starta CSS

Nu kasta vi i några grundläggande styling för den här texten. Allt jag verkligen har gjort är att ställa in teckensnitt och lagt till lite marginal för varje sektion för att sprida dem snyggt ut.

* {marginal: 0; vaddering: 0; } #container {width: 600px; marginal: 50px auto; } / * Text sektioner * / .section {margin: 50px 0; } .ection h1 {font: 55px / 65px Helvetica, sans-serif; } .sektion p {font: 15px / 25px Helvetica, sans-serif; }

Här är vad de resulterande styckena ser ut. Super enkelt men de får jobbet gjort för vad vi behöver.

Navigering och rubrikbild

För att navigera till ankrarna måste vi skapa en serie länkar i vår html med hjälp av hashtagmetoden i början av den här artikeln. Vi slänger också in en platshållarbild bara för att ge oss lite mer rullningsrum.

1 2 3 4 <img src="//lesptitesaffairesdemayl.be/img/images_1/how-to-link-to-specific-points-in-a-page-and-animate-the-scroll_3.jpg"> <p>När du svävar över en av länkarna övergår bakgrundsfärgen till blå. Observera att linjens höjd på texten är inställd på lådans storlek, det här är ett snyggt knep för att centrera texten vertikalt. </p> <h3>Rensa Float</h3> <p>Eftersom jag ville vrida länkarna i lilla lådor, var jag tvungen att hålla visningsegenskapen inställd att blockera. Detta innebär att länkarna raderas horisontellt, en flotta var nödvändig. Det finns en hel del debatt om hur man rensar flyter idag, men en snabb sökning avslöjade att den nuvarande favoritmetoden verkar vara följande från Pathfinder Software.</p> <p>Känn dig inte oense och implementera dina egna float-lösningar. Jag går inte längre in i detta för att undvika distrahering från huvudsyftet med denna handledning.</p> <textarea wrap="soft" readonly=""> / * float clearing för IE6 * / * html .clearfix {höjd: 1%; överflöde: synligt; } / * float clearing för IE7 * / * + html .clearfix {min-höjd: 1%; } / * float clearing för alla andra * / .clearfix: efter {clear: both; innehåll: "."; display: block; höjd: 0; synlighet: gömd; typsnittstorlek: 0; }

Slutförd demo: Ren HTML / CSS

Med det är vår inbyggda länk demo komplett! Klicka på någon av länkarna i navigeringen och de borde ta dig till den punkten på sidan. Observera att för ankarna nära botten av sidan rullar bläddringen så långt som möjligt.

Live-demo: Klicka här

Animera rullningen

Med HTML fungerar ankarkoppling, men övergången är ganska hård.Det finns ingen animering alls, sidan hoppar bara till ankaren vid klickning. Om vi ​​vill göra detta mer gradvis, så kan användaren helt enkelt se att sidan rullar ner?

Du kan utföra hela länknings- och bläddringsoperationen i JavaScript, men jag tror att det är en dålig idé, helt enkelt för att du onödigt begränsar antalet personer som kan använda din webbplats till de som har JavaScript aktiverat. Istället är det mycket bättre att ställa in länken i HTML precis som vi har gjort här och sedan lägga till animeringseffekten för JavaScript-användare. Sidan kommer fortfarande att fungera för alla som har JS avstängd, de kommer inte bara se animationen.

För att uppnå detta behöver vi tre saker. Den första är förstås jQuery eftersom det är fantastiskt och gör allt lättare. Den andra är ett extremt praktiskt litet jQuery-plugin från Ariel Flesler som heter ScrollTo, och äntligen behöver du en offshoot av ScrollTo kallas LocalScroll.

Det här låter komplicerat men det är super enkelt. LocalScroll byggdes för det enda syftet att animera ankarlänken rullar så det är det perfekta verktyget för jobbet. Det är också den enklaste lösningen att genomföra som jag kunde hitta! Det första du behöver göra är att ladda ner LocalScroll och sätt in den tillsammans med jQuery i din HTML (ScrollTo kommer att inkluderas i nedladdningen också).

Nästa måste vi gå in i det moderelementet som innehåller hashtag-länkarna. I vårt fall innehåller #nav div länkarna så vi lägger in det i följande kod:

$ (dokument) .ready (funktion () {$ ('# nav'). localScroll ({duration: 800});});

Allt du behöver göra för att implementera detta i dina egna projekt är att ändra målet och, om du väljer, ange en varaktighet för animeringen. Det är allt! Det här lilla textblocket tar hand om den animerade rullningseffekten för oss.

Avslutad demonstration: Animerad med JavaScript

Här är version två av vår demo, den här gången med JavaScript-magisk kasta. Jämför det med den tidigare versionen för att se hur mycket trevligare effekten känns med övergången.

Live-demo: Klicka här

Slutsats

Slutligen, kom ihåg att länkning till en rullpunkt inom din sida är enkelt med ren HTML. Allt du behöver göra är att skapa en namngiven länk som är kopplad till en viss plats och en klickbar länk som får dig där.

Därefter, om du vill göra övergången mer gradvis, använd jQuery och LocalScroll tillsammans. Var noga med att ange både förälderbehållaren för dina länkar och animeringens varaktighet.