Scroll to the top with jQuery!

This is a short tutorial on how to put a button on your web site that when clicked, will take the visitor to the top of the page in a smooth animation.

You can see how the button works by looking at the right side of my site. There should be a button there. If there isn’t a button there, scroll down a bit and it should appear. Try clicking on it 🙂

I’ve also made a simple demo page. You can download the demo here.

Step 1

Let’s start by adding jQuery to a page. You do that by pasting this code into the head tag of your html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

This will tell the browser to load jQuery from Googles server when your page is loaded.

Step 2

Add this html code to the bottom of your html, just before the body tag closes.

<a id="toTop" href="#">Go to Top</a>

This is the button/link that will take the user to the top when clicked.

Step 3

Now we’ll add some CSS for the button. It should also go into your head tag. We want the button to be located to the right and positioned in the vertical center of the page.

<style type="text/css">

#toTop {
 display: block;
 position: fixed;
 top: 50%;
 right: 0;
 padding: 10px;
 border: 2px solid red;
 background: white;

}
</style>

By using position: fixed; When the user scrolls, the button will always appear at the same place on the page.

Step 4

Now we’ll add script tags and initate jQuery.

<script>
 $(document).ready(function(){

// Javascript code will go here.

});
 </script>

The second line “$(document).ready(function()” will tell the browser to run the code inside these brackets when the page loads.

I always test if jQuery is working by typing “alert(“jQuery is working!”);” inside the document.ready function. Like this:

$(document).ready(function(){

// Javascript code will go here.
 alert("jQuery is working!");

});

If it works, when your refresh your page you should get an alert “jQuery is working!”, if not, you should check if you loaded jQuery correctly.

Step 5

We can finally add the javascript that will make the page automatically scroll up when the button is clicked.


$(document).ready(function(){

 // Hide the toTop button when the page loads.
 $("#toTop").css("display", "none");

 // This function runs every time the user scrolls the page.
 $(window).scroll(function(){

 // Check weather the user has scrolled down (if "scrollTop()"" is more than 0)
 if($(window).scrollTop() > 0){

 // If it's more than or equal to 0, show the toTop button.
 console.log("is more");
 $("#toTop").fadeIn("slow");

 }
 else {
 // If it's less than 0 (at the top), hide the toTop button.
 console.log("is less");
 $("#toTop").fadeOut("slow");
 }
 }

});

// When the user clicks the toTop button, we want the page to scroll to the top.
$("#toTop").click(function(){

 // Disable the default behaviour when a user clicks an empty anchor link.
 // (The page jumps to the top instead of // animating)
 event.preventDefault();

 // Animate the scrolling motion.
 $("html, body").animate({
 scrollTop:0
 },"slow");

});

I hope I have commented the above code so you will understand what is happening. The demo html file also has comments in it to make it easier to understand. If something is not working properly or you think this is the best tutorial that’s ever been written, don’t hesitate to comment 😉

Posted in Development | 28 Comments

Klas Christmas Tale

My friend Klas has had an animated Christmas tale on the internet since 1996! It’s now available as an iPad app in the app store. Check it out! 🙂

Posted in Design, Personal | Leave a comment

Print 3D objects at home!

There’s a new home 3D printer in town: Printrbot. It’s simple to build and easy to use. I want want one. I’ve been checking the Makerbot and Ultimaker, but they’re both a bit to pricey for me.

Here are some videos of the Printrbot.

Posted in Design, Personal | 1 Comment

Arduino Temperature Sensor – Winter is Coming

This blog post is old and the code is not up to date. Here’s a tutorial on how to connect the temperature sensor to your arduino. To send sensor data to the internet you need to use a service like COSM.

I’ve started tinkering with Arduino. My first real project was to connect a DS18B20 temperature sensor to Arduino. I have an ethernet shield on the arduino that uploads data to pachube.com.

The temperature sensor is protected by an old film case and is right outside my window. I wanted to have a web site where I can check the outside temperature so I found a small jQuery script that takes JSON data from my Pachube feed and outputs it on a small web site.

Here’s the pachube feed, and here’s the mobile web site. Get the code here.

Posted in Arduino, Development, Personal | 18 Comments

Photos by my friend Emil

My friend Emil studies at the Oslo national academy of the arts. If you like photography be sure to check out his portfolio.

Posted in Personal | Leave a comment

WordPress Snippets!

I found a great web site the other day. WP-Snippets collects a bunch of useful snippets for WordPress devs. Check it out!

Posted in Development | Tagged | Leave a comment

Prototype of my text based adventure released

Text Adventure Time!

The past months I’ve been wanting to learn a bit more about web programming, so I set out to make some sort of game. What I thought would be easy was to make a text based adventure game. It didn’t turn out to be easy, but I’ve learnt a lot.

The game is very similar to the old text based adventure games, but the difference is that you don’t do any typing while playing. You click and drag items to interact. It makes it easier to play the game (people have less patience nowadays) and it is easier to play it on mobile devices.

My plan is to develop the game a bit more with feedback from the internets and also make a website with a WYSIWYG editor so people can create their own stories and share them with friends.

The game uses regular HTML and CSS for displaying the stories. The functionality is javascript (jQuery). Stories are stored in a mySQL database and are transmitted via JSON. The community web site will be built using CodeIgniter.

Oh, I almost forgot… you can play the game here.

Posted in Design, Development | 10 Comments

jQuery scrollTo & localscroll Tutorial

In this tutorial you’ll learn how to make anchor links that scrolls the page smoothly using jQuery, scrollTo and localScroll.

If you have any questions, please write them in the comments below and I’ll try to help you 🙂

Here’s a demo of what the end result will be.

Start with an empty html file. Give it any name you want, as long as it ends with .html or .htm.

Double click the code window to make the code easier to copy.


	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>My jQuery scrollTo & localscroll Demo</title>

</head>

<body>

</body>
</html>

Inside the head tags we will have to load jQuery, scrollTo and localscroll. It’s important to do it in the order I just wrote. Since scrollTo and localscroll are plugins of jQuery, they first need jQuery to be loaded for them to work.

Copy this code into your head tag of your html document.

<!-- Load jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

	<!-- Load ScrollTo --><script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>

	<!-- Load LocalScroll -->
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>

We’re now loading jQuery and the plugins directly from google. You can also save them to your computer and load them locally. If you want your html file to work offline, this is a must. Now we’re going to set up links and divs to scroll to. Pase the following into the body tag of your html document.

</pre>
<h3>Links to colored boxes</h3>
<pre>

</pre>
<div id="box-links"><a href="#box1">Link to box #1</a> <a href="#box2">Link to box #2</a> <a href="#box3">Link to box #3</a> <a href="#box4">Link to box #4</a></div>
<pre>

</pre>
<div id="box1" class="box">Box #1</div>
<pre>

</pre>
<div id="box2" class="box">Box #2</div>
<pre>

</pre>
<div id="box3" class="box">Box #3</div>
<pre>

</pre>
<div id="box4" class="box">Box #4</div>
<pre>

Let’s set up the actual script that will enable the smooth scrolling. Paste this code inside your head tag at the very bottom (above “</head>”).

	<!-- javascript that will initiate jQuery and the LocalScroll plugin --><script type="text/javascript">// <![CDATA[
	// When the document is loaded...
    $(document).ready(function()
	{
		// Scroll the whole document
		$('#box-links').localScroll({
		   target:'body'
		});

	});

// ]]></script>

Your document probably looks a bit dull now. Only text. We need some CSS! Put this code in your head tag as well:

<style type="text/css">

	/* CSS for the big boxes */

	.box {
		width: 300px;
		height: 300px;

		color: #fff;
		padding: 10px;

		margin: 100px 0 0 0;
	}

	#box1 {
		margin: 300px 0 0 0;
		background: blue;
	}

	#box2 {
		background: red;
	}

	#box3 {
		background: green;
	}

	#box4 {
		background: gray;
	}

	/* CSS for the small boxes that will scroll inside a div */

	#small-box-container {
		border: 1px solid black;
		padding: 20px;
		width: 300px;
		height: 200px;

		overflow: scroll;
	}

	.small-box {

		color: #fff;
		padding: 10px;

		width: 200px;
		height: 200px;
		margin: 0 0 50px 0;
	}

	#small-box1 {
		background: blue;
	}

	#small-box2 {
		background: red;
	}

	#small-box3 {
		background: green;
	}

	</style>

Now, when you click on a link. Your whole document should smoothly scroll down to a colored box.

Here’s the whole code for the html document. I’ve also added a div where you scroll to boxes inside.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>jQuery scrollTo & localscroll Demo</title>

	<!-- Load jQuery -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

	<!-- Load ScrollTo -->
	<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>

	<!-- Load LocalScroll -->
	<script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>

	<!-- Some CSS -->
	<style type="text/css">

	/* CSS for the big boxes */

	.box {
		width: 300px;
		height: 300px;

		color: #fff;
		padding: 10px;

		margin: 100px 0 0 0;
	}

	#box1 {
		margin: 300px 0 0 0;
		background: blue;
	}

	#box2 {
		background: red;
	}

	#box3 {
		background: green;
	}

	#box4 {
		background: gray;
	}

	/* CSS for the small boxes that will scroll inside a div */

	#small-box-container {
		border: 1px solid black;
		padding: 20px;
		width: 300px;
		height: 200px;

		overflow: scroll;
	}

	.small-box {

		color: #fff;
		padding: 10px;

		width: 200px;
		height: 200px;
		margin: 0 0 50px 0;
	}

	#small-box1 {
		background: blue;
	}

	#small-box2 {
		background: red;
	}

	#small-box3 {
		background: green;
	}

	</style>

	<!-- javascript that will initiate jQuery and the LocalScroll plugin -->
	<script>

	// When the document is loaded...
    $(document).ready(function()
	{
		// Scroll the whole document
		$('#box-links').localScroll({
		   target:'body'
		});

		// Scroll the content inside the #scroll-container div
		$('#small-box-links').localScroll({
		   target:'#small-box-container'
		});

	});
    </script>

</head>

<body>

<h1>A very simple jQuery LocalScroll Demo</h1>

<h3>Scroll inside a div</h3>

<div id="small-box-links">

	<a href="#small-box1">Link to small-box #1</a>
	<a href="#small-box2">Link to small-box #2</a>
	<a href="#small-box3">Link to small-box #3</a>

</div>

<div id="small-box-container">
	<div id="small-box1" class="small-box">Small-Box #1</div>
	<div id="small-box2" class="small-box">Small-Box #2</div>
	<div id="small-box3" class="small-box">Small-Box #3</div>
</div>

<hr>

<h3>Links to colored boxes</h3>

<div id="box-links">

	<a href="#box1">Link to box #1</a>
	<a href="#box2">Link to box #2</a>
	<a href="#box3">Link to box #3</a>
	<a href="#box4">Link to box #4</a>

</div>

<div id="box1" class="box">Box #1</div>
<div id="box2" class="box">Box #2</div>
<div id="box3" class="box">Box #3</div>
<div id="box4" class="box">Box #4</div>

</body>
</html>

I hope you found this tutorial useful. If you have trouble getting it to work, please write your questions in the comments below. Cheers!

I’ve written a new tutorial on making a simple “scroll to the top button”. If you liked this tutorial I think you’ll like the new one as well 🙂

Posted in Development | Tagged , , , | 206 Comments

mySQL dump path and MAMP

When moving this site, I used WordPress DBmanager plugin to back up my database. I had trouble finding the path to mySQL and the mysqldump.

The path to the “files” are as follows.

To mysqldump: /Applications/MAMP/Library/bin/mysqldump
To mysql: /Applications/MAMP/Library/bin/mysql

Hope it will help someone 🙂

Posted in Development | Tagged , | 26 Comments

iNSTANT KÖKSBORD

En must have app.

http://www.mittegetjavlanarnia.se/?p=2034

Posted in Personal | Leave a comment