Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Scrolla till toppen – pil upp

Scrolla till toppen – pil upp

Vi vet alla hur irriterande det är när man hamnar längst ner på en sida och måste scrolla för att ta oss tillbaka upp igen. Detta går att lösa med lite jQuery. Jag ska gå igenom hur du kan få in en pil upp som visas så fort du eller någon annan börjar scrolla neråt – och när du klickar på pilen så förs du upp till toppen av sidan.

Först av allt vill jag att du ska kopiera nedanstående CSS in till din stilmall!

#totop a
{
display: block;
display: none;
z-index: 999;
opacity: .8;
position: fixed;
top: 100%;
margin-top: -80px;
float:right;
right:100px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
width: 50px;
line-height: 48px;
height: 50px;
padding: 10px;
background-color: #000; /* Du kan byta färg genom att du först tar bort #000 och skriver in den färg som ska visas när man inte hovrar */
font-size: 24px;
text-align: center;
color: #fff;
text-decoration:none;
}
#totop a:hover {
background: #900; /*Färg när man hovrar! Byt ut #900 till en annan färg (om du vill) */
}

Om du vill ändra färg på bakgrunden till den (för den ser ut som på bilden nedan), så har jag skrivit in vart färgerna är i CSS:et!

I din kodmall (där du har din HTML) så kopierar du in nedanstående direkt under <body> tagen!

&lt;div id="top"&gt;&lt;/div&gt;
&lt;div id="totop"&gt;&lt;a href="#top"&gt;&amp;uarr;&lt;/a&gt;&lt;/div&gt;
&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(function () {
var scroll_timer;
var displayed = false;
var $message = $('#totop a');
var $window = $(window);
var top = $(document.body).children(0).position(0).top;
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () {
if($window.scrollTop() &lt;= top)
{
displayed = false;
$message.fadeOut(500);
}
else if(displayed == false)
{
displayed = true;
$message.stop(true, true).show().click(function () { $message.fadeOut(500); });
}
}, 100);
});
});
&lt;/script&gt;

Om du nu har följt guiden till punkt o pricka, så ska du nu ha en pil som visar sig när du börjar scrolla neråt i din blogg!

Den följer dessutom med hela tiden man scrollar neråt.

Från filmen:

Uppåtknapp ( pil upp ) som scrollar till toppen

Hej hörni.
Idag så ska jag visa er en typ av uppåtknapp (pil uppåt) som man kan ha på sidan. Ni ser den inte just nu därför att just nu är jag ju högst upp på sidan men rullar jag ner lite då dyker den upp där och hur man gör detta då det ska jag berätta nu.
Ni börjar med att ta kodmallskod numer 1 och så går ni in i kodmallen och så trycker ni command-f och söker ni efter body. Där har ni body och du byter ni ut body mot kodmallskod numer 1, det har jag redan gjort där så, sen tar ni kodmallskod numer 2 och så lägger ni den precis nedanför det nya body-stycket. Så först har vi det här body som nu byter ut och sen har vi kodmallskod numer 2 som hamnar precis under så. Då ser ni att här så är själva pilen och går vi då in och tittat på min sida här så ser ni att det är en lite speciell pil men den kan man alltid byta ut om man vill så då kan man gå in på grunder här på min blogg, eller på min bloggtipssida och så går man in på symboler och så kan man scrolla ner här då till pilarna och då kan du välja precis vilken pil du vill ha eller om du nu skulle vilja ha en annan typ av symbol.

Men jag skulle rekommendera att ha någon typ av pil i alla fall så att man förstår att det är en uppåtknapp. Har man till exempel ett hjärta eller en blomma så är det ju inte helt, man förstår inte helt vad den här knappen gör i så fall. Men ett alternativ är ju att ha en av trianglarna till exempel.

Så, klistrar vi in dem och så sparat vi kodmallen, publicera ändringar. Sedan så tar ni stilmallskoden och så går ni in i stilmallen och så klistrar ni in den där. Jag har klistrat in min här men ett tips är att lägga det längst ner så vet du var du har koden.

Då har vi lite olika stycken i den här kodmallen som jag tänkte, eller den här stilmallskoden som jag tänkte att jag skulle förklara. Först så har vi opacity, den ligger på åtta just nu och det betyder alltså att den är ganska genomskinlig den här länken. Den siffran kan man leka lite med, prova sig fram hur genomskinlig vill man ha den här länken. Sen har vi margin-top, det betyder alltså hur långt ner eller upp på sidan ska den vara. Om man till exempel skulle vilja att den här ligger här nere istället när den syns, för den kommer ju ligga på ett och samma ställe för ni ser den är fixerad så den flyttar liksom inte på sig. Då så får man göra det här, vad heter det, det här stycket lite större för nu ligger det på minusvärde, -300 så då får man göra det lite större till exempel -100 och så kan man testa det.

Sen har vi float-left som jag har lagt den till. Det behöver ni inte bry er om. Vi har både radius och det betyder hur rundar kant det är på den så det kan ni testa er fram lite om ni vill ha mindre rundat kant eller om ni inte vill ha rundad kant alls, sätter man noll här då på de här tre till exempel. Då blir det ju en fyrkant istället så kan vi uppdatera och kolla, då ska vi se. Nu har jag så mycket script på den här sidan så därför så tar det ganska lång tid för den att ladda. Men då ser ni att få blir det fyrkantig stället och det kan man testa sig fram också.
Sedan så har vi width och height, det är alltså hur hög den här boxen ska vara. Den är 50 pixlar hög och 50 pixlar bred. Man an göra den mindre och man kan göra den större. Jag gör den 30 lång så ska vi se hur den ser ut. Då ser ni att då ser den ut så istället och då får man justera den pilen lite med padding och margin och sådant där så att den inte blir så långt ner då.

Sen så har vi, ska vi se, background-color, det är alltså vilken färg ska det vara på den på bakgrunden. Sen har vi font-size, alltså hur stor ska pilen vara. Sedan har vi text-align center, det är alltså att pilen ligger i mitten och där kan man ha left eller right om man vill ha den till höger eller vänster eller center om man vill ha den i mitten.
Sen har vi color och det är alltså textfärgen, vilken färg ska pilen vara. Min är vit och det är vit som ligger i koden. Sen har vi margin-left vilket betyder hur långt från vänsterkanten ska den här ligga. Vill man ha den här borta istället till exempel kan man ju lägga 950 eller 1000 pixlar, beroende på hur bred blogg man har då så det får man också testa sig fram litegrann.

Sen går vi ner till totop a hover, det är alltså när man drar med musen över den här, vilken färg ska den vara då och det är det som den här färgkoden styr så den kan man också leka lite med och det är så man gör helt enkelt för att göra den här uppåtknappen.

Det var det jag skulle visa er idag – en pil upp som scrollar till toppen. Ni ha det så bra.

Hej hej.

30 kommentarer

  1. SvaraJennifer

    Det syns tyvärr ingenting alls på min blogg. Inga pilar whatsoever. Tog bort koden nu dock (vill inte ha massvis med onödig kod där), så du kan inte kolla. Men jag följde anvisningarna till punkt och pricka. Var ju bara copy-paste & det klistrades in direkt under . Har det fungerat för andra?

      1. Emmy

        Mitt funkar inte fast man sätter den längst upp eller längst ner i stilmallen. Å ändå gör jag som de står, vad gör jag för fel ? Tack på förhand!

  2. SvaraVilma

    Hej !
    Jag har lärt mig massor av att titta runt i bloggen. 
    Skulle du kunna visa hur man får menyn uppe på bloggen och när man nuddar t.ex. “Senaste Inläggen” Åker det ner de senaste inläggen. ? 


    1. Author
      SvaraStrangerz

      Skicka mig ett mail så tar vi det där. strangerz@live.se

      Det är nämligen annorlunda för olika templates. Så skicka mig ett mail med en länk till din blogg, så ska jag kolla på det.

    1. SvaraJimmy

      På Blogg.se går det inte att få med sig gamla inlägg till en ny blogg såvida man inte kopierar dem manuellt. Om du ska byta till WordPress finns dock ett script för det du efterfrågar, om du använder dig av det scriptet kan du dessutom via en “omväg” flytta över dina inlägg till Blogger.

  3. Svarajohanna

    hejj ! jag har gjort som man ska och jag får en pil som man klickar på för att komma upp igen, men problemet är att man inte kommer ända upp, man måste klicka uppåt någon gång till innan man kommer upp till toppen. vad kan det bero på ?


    1. Author
      SvaraStrangerz

      Varför ram runt bilden? Jo, för att om du läste mitt CSS tutorial så ser du att det är en så kallad “border” där.


    1. Author
      SvaraStrangerz

      Okej. Jo, pilen visas och allting. Varför det känns som att man inte kommer ända upp, är för att du kommer inte ända upp på “hela” sidan. Du kommer längst upp på wrappern. Det där ovanför har ju ändå ingen betydelse. Jag lovar dig att det är ingenting att oroa dig för.

  4. SvaraEmelie

    Om du kollar på min blogg så har det kommit något rosa under headern, hur får man bort det? Jag vill inte ha det så…


    1. Author
      SvaraFelix

      Du får ju tänka på dom som inte kan sådant. Det handlar om att göra det användarvänligt. Det ska inte vara lätt för dig att använda sidan, det ska vara lätt för ALLA. Så måste man tänka ifall man ska skapa hemsidor. 😉

      Men jo, Home-knappen fungerar lika bra, men detta är mer stilrent och lättare för alla att förstå. 😉

  5. SvaraSara!!!!!!

    Måste man ha en mus att scrolla med?? Eller en speciell webbläsare? För jag får ingenting förutom en svart rand högst upp. Och min header (som kommer från ett inlägg här, där den ändras som ett bildspel liksom) försvann…

  6. SvaraLouisa

    asbra! men jag skulle vilja att den såg annorlunda ut, så om man kanske kunde lägga in en egen bild eller något och ändra utseendet på knappen, går det? 🙂

  7. SvaraFoto, design & mamma till Alexander ♥

    Undrar precis som ovan om man kan ändra utseendet på pilen?

    Tacksam för svar! 🙂

  8. Svaralina.

    vart ska man klistra in denna koden? :
    #totop a
    {
    display: block;
    display: none;
    z-index: 999;
    opacity: .8;
    position: fixed;
    top: 100%;
    margin-top: -80px;
    float:right;
    right:100px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
    width: 50px;
    line-height: 48px;
    height: 50px;
    padding: 10px;
    background-color: #000; /* Du kan byta färg genom att du först tar bort #000 och skriver in den färg som ska visas när man inte hovrar */
    font-size: 24px;
    text-align: center;
    color: #fff;
    text-decoration:none;
    }

    #totop a:hover {
    background: #900; /*Färg när man hovrar! Byt ut #900 till en annan färg (om du vill) */
    }

    tacksam för svar!

  9. SvaraMadde

    Hej, jag måste ha satt min uppochner eller något för när jag trycker sedan på pilen kommer jag längst ner på sidan… ehhh… hur kan jag rätta till det? 🙂

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

OBS! Om du skall skriva kod måste du göra på följande sätt: [code]Din kod här[/code]

Genom att använda DDB, godkänner du användning av cookies. mer info

Denna sajten använder cookies för bästa användarupplevelsen. Genom att använda sajten accepterar du att cookies används.

OK