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 uppåt pil 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!

<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>

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.

Om Felix

Felix Cervin har skrivit 12 inlägg.