- foreeveermee.blogg.se

Pil upp på bloggen

Hej på er :)

Fick en fråga om hur man får dit en pil vid sidan av bloggen som när man klickar på tar en ända upp på sidan igen.

Så nu ska jag förklara hur man gör ;)

Såhär ser pilen ut:

1. Kopiera texten nedan

#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) */
}
 
2. Klistra in den i din stilmall
3. Kopera text nedan:



<div id="top"></div>
<div id="totop"><a href="#top">&uarr;</a></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(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() <= top)
{
displayed = false;
$message.fadeOut(500);
}
else if(displayed == false)
{
displayed = true;
$message.stop(true, true).show().click(function () { $message.fadeOut(500); });
}
}, 100);
});
});
</script>



4. Klistra in det i kodmallen precis under <body>
 
KLART! :D
Testa skrolla neråt så kommer den nog ploppa fram ;)
 
Kram

2013-02-03 @ 15:09:19 Design tips Permalink

Kommentarer

Postat av: Maddää

Smart!

bloglovinbyte?

2013-02-03 @ 15:55:19
URL: http://cajjohjartamadde.blogg.se

Postat av: Elin

säg till när du lagt till mig så lägger jag till dig:)

2013-02-03 @ 15:56:32
URL: http://elinkristensson.blogg.se

Postat av: Marie Legendre

Åh tack!
Ska fixa pilen så fort jag kommit lite längre med designen!

Kram Marie!

2013-02-03 @ 15:58:18
URL: http://marielegendre.blo.gg

Postat av: Sofia

Fin blogg :)
Kika gärna in i min blogg och kanske lämna en liten kommentar efter dig :)
Gör även bloglovin-byten :)

2013-02-03 @ 18:26:32
URL: http://borttaget.blogspot.com

Postat av: Linn Strömberg

VECKANS BLOGG AVSLUTAD :D In och kika om du vann? Och anmäl dig igen också ^^
http://quad.blogg.se/2013/february/veckans-blogg-vinare-ny-omgang.html#comment

2013-02-03 @ 18:38:53
URL: http://cigarettesncush.blogg.se/

Postat av: J O S E F I N

Svar - Åh tack så jätte mycket :') KRAM ♥

2013-02-03 @ 21:37:52
URL: http://josefinanna.blogg.se

Postat av: Sara

sv: blev nummer 255! säg till vilket nummer du blir :)

2013-02-04 @ 14:55:22
URL: http://sarajosefin.blogg.ae

Postat av: molz

haft en bra dag? :D

2013-02-04 @ 16:14:59
URL: http://molz.blogg.se

Postat av: Loreen Talhaoui - Fanblogg ♥

Hej! Tycker du om våran fina Loreen Talhaoui? Isåfall kanske du skulle gilla min blogg som handlar just om henne :) Du hittar den på: http://loreen.blogg.se/   

Ha det bäst, kram! ♥

2013-02-04 @ 16:29:52
URL: http://loreen.blogg.se

Postat av: Julia

sv: vad kul att höra :D
Vad har du gjort idag?

2013-02-04 @ 17:03:03
URL: http://typliia.blogg.se

Postat av: Alice

Hej allt bra? :)

2013-02-04 @ 18:17:54
URL: http://photobyalice.blogg.se

Postat av: Wilma

Vilken grym blogg du har, älskar stilen. Hoppas att du får en grym dag, kram!

2013-02-04 @ 19:53:18
URL: http://picbywn.blogg.se

Postat av: Alice - bilderbyalice

bra tips :)

2013-02-04 @ 20:07:48
URL: http://bilderbyalice.se

Postat av: Amanda - vardag,foton,inspiration,inredning, outfit,tips,quotes,videoblogg!

sv: tack! :D

2013-02-04 @ 20:37:21
URL: http://mandacecilia.blogg.se

Postat av: Kajsalisa Pohl

sv: Min helg har varit bra! Haft en bra måndag? :)

2013-02-04 @ 20:50:02
URL: http://villbaraleva.blogg.se/

Postat av: FrökenTV, bloggen om tv och film

funkar inte :o

2013-09-29 @ 16:50:21
URL: http://efji.blogg.se/