In the days of Star Trek, Captain Kirk used to command his first transporter named Scotty to beam him up. With ScottyBeam's (as in Scotty beaming) you get the power to allow everyone to say this and beam you anywhere around your site.
ScottyBeam's adds this dynamic and animated scrolling to anchors right on your site. It is a powerful script used with the very popular jQuery libraries
Click any of the links inside this page to see how this works. You can also visit my blog where I have ScottyBeam's integrated as well.
Instructions on how to get this thing going are right here.
If you enjoy using ScottyBeam's and you wish to make a small donation, then feel free to do so by doing so via PayPal.
I will now show you how to implement ScottyBeam's into your site. I am assuming you have at least a bit of HTML knowledge.
- Create a new and custom javascript file with your site (or use a existing one). Set the contents of the file as follows:
$(document).ready(function() {
// ScottyBeam's
// Created by JSClip (www.jsclip.com) - Max Karreth
// Use this with a jQuery library version 1.2.2 or higher
// Be sure to check the license and readme at the website
$('.scotty-beams').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body')
.animate({scrollTop: targetOffset}, 'slow');
return false;
}
}
});
});
- Now go ahead and download jQuery. You can do so by clicking here. Choose the minimized version and place that into your site folder.
- Open your file to which you'd like to add ScottyBeam's. Instantiate both scripts in the header with the correct location paths. For example:
<head>
<!-- Animated scrolling by ScottyBeam's from JSClip(www.jsclip.com). -->
<script src="PATH/TOJQUERY/FILE" type="text/javascript"></script>
<script src="PATH/TO/CUSTOM/FILE" type="text/javascript"></script>
</head>
- You can now use the beams by adding the scotty-beams class to any link you wish. Make sure the link uses standard anchors to navigate to a certain place. Setting no anchor will make the script beam to user to the top. For example:
<a class="scotty-beams" href="#">Beam me up Scotty!</a>
You can now use this class to have people being brought back to the top with this script or you can just use it for any anchors in your site.
Additionally, ScottyBeam's not only works vertically, you can beam people horizontally as well!
Done! Do not delete any of the credit lines in the code. If you do, you will be violating the license and may not use this script. In order for you to use ScottyBeam's, you need to follow and accept the license found here.
ScottyBeam's is based on the jQuery library. Thus, the jQuery library applies for the jQuery stuff.
The ScottyBeam's script has been written by Max Karreth and is licensed under this Creative Commons license. Additionally to the terms specified in that license, I would like to clarify that the attribution must remain in the position I have specified above.
For any questions, concerns or you wish to tweak the license a bit, then feel free to contact me.