En sådan funktion som "upp"-knappen för webbplatsen gör internetresursen mer bekväm för sina besökare. Det hjälper dig att enkelt flytta från var som helst på sidan till toppen av sidan. Detta är ett måste för nätbutiker och webbplatser med stora artiklar som kräver lång rullning nedåt.
Vad är det för
För tillfället har de flesta sajter inte en sådan funktion som en "upp"-knapp, och det finns inget kritiskt i detta. Men dess användning kan ge många fördelar både för internetresursen och för dess besökare.
Förmån för besökare
Det händer ofta när sidan på en internetresurs är tungt laddad med information, när en informationsartikel tar mycket utrymme och du måste scrolla ner på sidan med mushjulet. Utöver detta kan det i slutet av artikeln finnas många kommentarer om den.
När en besökare läser en artikel är det inget tröttsamt med att scrolla ner på sidan, men när texten har tagit slut och du måste flytta uppåt börjar det bli lite tröttsamt. De flesta människor kommer helt enkelt att vara för lata för att scrolla länge, och de kommer helt enkelt att stänga webbplatsen, istället för att ta en ny promenad runt dess vidder.
Använda knappenatt omedelbart flytta till toppen av sidan gör det bekvämare att spendera tid på webbplatsen.
Fördel för internetresursen
Det positiva för själva resursen kommer från tidigare faktorer, eftersom enklare webbplatsnavigering förbättrar beteendefaktorer eftersom alla besökare kommer att vara mer aktiva i sina handlingar och flytta till andra sidor.
De här beteendefaktorerna påverkar alltså alla sökmotorers attityd till webbplatsen och leder till en förbättring av positionen i sökresultaten.
Hur man gör "upp"-knappen på webbplatsen själv
Hantering ytterligare. Du kan alltid skapa en scroll up-knapp för en webbplats på något av CMS själv genom att följa några extremt enkla steg:
- bildskapande;
- skapa ett manus;
- skapa knappstil;
- lägger till på webbplatsen.
Knappbild
För att lägga till en "upp"-knapp på sajten måste du först skapa själva ikonen, när du klickar på den kommer användaren att flytta till toppen av sidan. För att göra detta kan du använda färdiga alternativ, bland vilka du alltid kan välja det mest lämpliga.
För att förbättra utseendet på knappen måste vi göra några förbättringar, nämligen att göra en sprite som låter oss kombinera bakgrundsbilder baserade på CSS och därigenom skapa en animation av dem.
För grafiska verk kan du använda vilken redigerare som helst. Men det mest bekväma alternativet skulle vara en onlinetjänst. PIXLR, eftersom det inte finns något att ladda ner här och du kan använda det direkt i din webbläsare.
För att komma igång, välj fältet "Ladda upp bild från dator" i redigeringsfönstret som visas. Låt oss ta bilden av en raket som exempel.
Om måtten på den valda ikonen är för stor, måste du göra en liten storleksjustering. För att göra detta, gå till toppmenyn och välj "Redigera"-fältet, och efter "Fri omvandling …"
Nästa, speciella markörer visas bredvid bilden, rörliga som du kan ändra storleken på bilden. För att bibehålla proportionerna kan du använda Shift-tangenten, håll den nedtryckt för att flytta de blå markörerna. I slutet av dessa steg erhålls en bild av en raket.
Nästa steg är att skapa en kopia av lagret.
Nu måste du flytta bilden av raketen från det nya lagret upp en aning. För att göra detta är det bekvämt att använda flyttverktyget, som finns i den andra kolumnen i vänstermenyn, och uppåtpilen på tangentbordet.
Nu måste vi göra den översta bilden svartvit. Detta kan göras med hjälp av objektet "Korrektion" - "Nyans / Mättnad" i toppmenyn. För fullständig desaturation bör skjutreglaget Saturation ställas in på -100. Den här åtgärden låter dig skapa en effekt där "Upp"-knappen ändras från svartvitt till färg när du håller muspekaren över den.
Si sista handen är att ta bort extra utrymme runt de två bilderna. För att göra detta, välj alternativet "Beskär" från menyn till vänster ochvi väljer bara två raketer i en rektangel. För att utföra beskärning, trycks Enter-tangenten ned.
Resultatet är en bild där det inte finns något extra ledigt utrymme. Du måste skriva ner bredden och höjden på den resulterande bilden, eftersom dessa data kommer att vara användbara i nästa steg.
För att spara måste du klicka på "Arkiv" - "Spara", där vi i det vänstra stycket "Den här datorn" skriver namnet på bilden (endast den engelska layouten), välj format (i detta case, PNG) och klicka på "Ja"-knappen.
Arkiv med skriptet för "upp"-knappen
Du behöver inte skriva ett manus i det här fallet. Det kommer att vara möjligt att använda den offentliga versionen, vilket gör vissa ändringar i den färdiga koden.
För att göra detta måste du ladda ner valfri kodredigerare. Det mest populära och även gratis alternativet är Notepad++. När du har installerat den måste du kopiera och klistra in all denna kod i den:
| $(document).ready(function(){ $(window).scroll(function () {if ($(this).scrollTop() > 0) {$('scroller').fadeIn ();} annars {$('scroller').fadeOut();}}); $('scroller').click(function () {$('body, html').animate({scrollTop: 0}, 400); return false;}); }); |
Klicka sedan i toppmenyn "Arkiv" - "Spara som …", varefter vi sparar koden i.js-format. Efter det kan du använda den här koden på din webbplats genom att ladda upp skriptfilerna och bilderna till den med en FTP-anslutning.
Installera på plats
För att ställa in rullningsknappen för sajten måste du placera inönskad platskod. Du måste ange den före taggen.
Skapa en knappstil med CSS
Oftast är "upp"-knappen för webbplatsen placerad längst ner ("sidfot").
Följande kod måste läggas till i webbplatsens style.css-fil:
|
/Upp-knapp/ .scrollTop{ background:url('images/up.png') 0 0 no-repeat;/native image path/ width:39px;/ button bredd/ höjd:96px;/50 % knapphöjd/ bottom:5px;/bottenstoppning i fast position/ vänster:89%;/skift vänster/ }.scrollTop:hover{ background-position:0 -108px; } /bakgrundsoffset/" |
I det här fallet kommer dessa bildbredds- och höjddata att behövas. Det återstår bara att ange mottagna data i koden, och "upp" -knappen för webbplatsen kommer att vara klar! Vad mer?
Upp-knapp för Wordpress-webbplats
För detta CMS kan "Upp"-knappen göras med hjälp av plugins, såväl som oberoende.
Insticksmetoden är den bekvämaste och enklaste att installera, eftersom den bara kräver att du klickar på installationsknappen och konfigurerar all funktionalitet i plugin-menyn.
Valet av det senare bör närma sig med försiktighet, eftersom det med det blir lätt att få ett virus på webbplatsen. Det mest populära och beprövade alternativet är ett plugin som heter Scroll Back To Top. Du kan ladda ner den med standardsökningen efter Wordpress-plugin-program.
Detta tillägg harflera funktioner, och det kommer att vara mycket enkelt att anpassa "upp"-knappen för en Wordpress-webbplats. Det är inte nödvändigt att ändra alla värden alls, du behöver bara konfigurera utseendet och placeringen av knappen på webbplatsens sida.
Som du kan se är det väldigt enkelt att konfigurera upp-knappen med plugins. Men det finns en viktig nyans, som är att varje installerat plugin laddar CMS. Detta kan påverka hastigheten på Internetresursen. Det är därför de flesta sajtägare försöker göra alla ändringar direkt i koden, och inte med hjälp av tredjepartstillägg. Du kan skapa en "upp"-knapp för en HTML-webbplats, vilket kommer att minimera resurserna som förbrukas.
Innan du ändrar alla Wordpress-systemfiler måste du säkerhetskopiera dem. Sedan kan du följa alla steg för att skapa din egen knapp, som beskrivs ovan.
Knapp "upp" för Joomla
CMS Joomla stöder även installation av plugins, som Wordpress. Den mest framgångsrika versionen av "upp"-knappen för en webbplats på Joomla 3 är en tillägg som heter Top of the Page.
I detta CMS kan alla plugin-program installeras via "Extension Manager". För detta behöver du:
- ladda ner plugin-programmet på Internet;
- klicka på "Bläddra"-knappen i tilläggshanteraren;
- välj nedladdat arkiv;
- klicka på "Ladda ner" och installera.
Nu måste du aktivera det i "Plugin Manager". För dettadu måste gå till det här avsnittet, hitta plugin-programmet och ändra dess status till "enabled".
Nästa steg är att konfigurera alla tilläggsparametrar med samma avsnitt där du behöver hitta "Grundläggande parametrar" för detta plugin på höger sida.
Överst på sidan har följande funktionalitet:
- Kör in/ administratör - aktiverar alternativet inte bara på internetresursen utan även i själva Joomla CMS-panelen.
- Button Reveal Position - hur många pixlar måste användaren spola tillbaka för att upp-knappen ska visas.
- Omit Button Text - närvaron av text på knappen.
- Alltid högst upp - sidan kommer alltid att visas från toppen. När du använder ankare för att rulla till en specifik plats på sidan behöver det här alternativet inte vara aktiverat.
- Smooth Scroll – gör sidrullningen smidigare.
- Scroll Duration - tiden efter vilken sidan kommer att flyttas helt till början.
- Scroll Transition - Lägger till fler visuella effekter för rullning.
- Transition Easing - "försvagar" rörelsen till toppen av sidan.
- Länkplats - ikonens plats. Som standard finns knappen i det nedre högra hörnet.
- Use Styles – individuell knappstil, som kan ställas in i fältet nedan. Om det ändras till ett negativt värde kommer alla stilinställningar att tas från det aktiva temat på webbplatsen.
- Link Style - ett fält för att ange dina knappstilsparametrar.
För att anpassa stilen på "upp"-knappen måste du ha minst minimalCCS kunskap. Annars bör du ändra värdet på den näst sista parametern till "Nej".
En annan viktig nyans är att den vanliga inskriptionen på ikonen innehåller den engelska texten: Return to Top. Sådan text kan inte finnas på en ryskspråkig webbplats, så du bör helt enkelt inaktivera den i plugin-parametrarna eller ändra den till ryska.
För att ändra denna inskription måste du gå till webbplatsservern med FTP eller filhanteraren som är inbyggd i webbhotellet. Därefter, i katalogen "/administrator/language/en-GB/" måste du hitta en fil som heter "en-GB.plg_system_topofthepage.ini".
Innan du ändrar texten bör du ändra kodningen av detta dokument till UTF-8. Detta kommer att göra normal visning av ryska bokstäver.
Nästa hittar vi följande rad:
| " PLG_SYS_TOPOFTHEPAGE_GOTOTOP="Återgå till toppen"" |
och ändra frasen inom citattecken till ryska. Du kan använda fraser som "Upp!", "Till toppen!" eller "Upp!".
I slutet måste du spara den ändrade filen och leta efter "upp"-knappen för webbplatsen på Joomla.
Upp-knapp för Ucoz
Upp-knappen för webbplatsen på Ucoz måste göras med kodinjektion, eftersom det är omöjligt att ansluta plugins för detta CMS. Detta kräver dock inte en lång studie av systemfilerna och sök efter de nödvändiga raderna, du behöver bara klistra in en liten kod på rätt ställe.
För att installera osskrävs:
- gå till "Kontrollpanelen -> Design -> Design Management (mallar) -> Nederst på webbplatsen;
- infoga skriptet (finns på projektets officiella webbplats och tredjepartsresurser).
Slutsats
Därefter visas en ikon i det nedre högra hörnet som flyttar användaren till högst upp på sidan.
Som du kan se var det inte särskilt svårt att ställa in bakåtknappen för något av CMS:erna. Du kan använda både en automatiserad installationsmetod (plugins) och en manuell. Det senare alternativet förblir dock det mest lämpliga, eftersom det inte påverkar webbplatsens prestanda negativt.
Du kan använda "back to top"-knappen för en HTML-webbplats för att minimera förbrukningen av webbplatsresurser, eftersom ett stort antal tillägg kan ha en negativ inverkan på resursens prestanda. En "upp"-knappsplugin kommer inte att kunna påverka laddningstiden för sajtsidorna, men i de flesta fall har användaren minst ett dussin plugins installerade på CMS. I det här fallet kan alla plugin-program påverka prestandan för webbplatsens sidor negativt.
