freedomboneeee/website/EN/mesh.html

669 lines
26 KiB
HTML

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<!-- 2016-08-08 Mon 17:19 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<meta name="generator" content="Org-mode" />
<meta name="author" content="Bob Mottram" />
<meta name="description" content="Turn the Beaglebone Black into a personal communications server"
/>
<meta name="keywords" content="freedombox, debian, beaglebone, red matrix, email, web server, home server, internet, censorship, surveillance, social network, irc, jabber" />
<style type="text/css">
<!--/*--><![CDATA[/*><!--*/
.title { text-align: center;
margin-bottom: .2em; }
.subtitle { text-align: center;
font-size: medium;
font-weight: bold;
margin-top:0; }
.todo { font-family: monospace; color: red; }
.done { font-family: monospace; color: green; }
.priority { font-family: monospace; color: orange; }
.tag { background-color: #eee; font-family: monospace;
padding: 2px; font-size: 80%; font-weight: normal; }
.timestamp { color: #bebebe; }
.timestamp-kwd { color: #5f9ea0; }
.org-right { margin-left: auto; margin-right: 0px; text-align: right; }
.org-left { margin-left: 0px; margin-right: auto; text-align: left; }
.org-center { margin-left: auto; margin-right: auto; text-align: center; }
.underline { text-decoration: underline; }
#postamble p, #preamble p { font-size: 90%; margin: .2em; }
p.verse { margin-left: 3%; }
pre {
border: 1px solid #ccc;
box-shadow: 3px 3px 3px #eee;
padding: 8pt;
font-family: monospace;
overflow: auto;
margin: 1.2em;
}
pre.src {
position: relative;
overflow: visible;
padding-top: 1.2em;
}
pre.src:before {
display: none;
position: absolute;
background-color: white;
top: -10px;
right: 10px;
padding: 3px;
border: 1px solid black;
}
pre.src:hover:before { display: inline;}
/* Languages per Org manual */
pre.src-asymptote:before { content: 'Asymptote'; }
pre.src-awk:before { content: 'Awk'; }
pre.src-C:before { content: 'C'; }
/* pre.src-C++ doesn't work in CSS */
pre.src-clojure:before { content: 'Clojure'; }
pre.src-css:before { content: 'CSS'; }
pre.src-D:before { content: 'D'; }
pre.src-ditaa:before { content: 'ditaa'; }
pre.src-dot:before { content: 'Graphviz'; }
pre.src-calc:before { content: 'Emacs Calc'; }
pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
pre.src-fortran:before { content: 'Fortran'; }
pre.src-gnuplot:before { content: 'gnuplot'; }
pre.src-haskell:before { content: 'Haskell'; }
pre.src-java:before { content: 'Java'; }
pre.src-js:before { content: 'Javascript'; }
pre.src-latex:before { content: 'LaTeX'; }
pre.src-ledger:before { content: 'Ledger'; }
pre.src-lisp:before { content: 'Lisp'; }
pre.src-lilypond:before { content: 'Lilypond'; }
pre.src-matlab:before { content: 'MATLAB'; }
pre.src-mscgen:before { content: 'Mscgen'; }
pre.src-ocaml:before { content: 'Objective Caml'; }
pre.src-octave:before { content: 'Octave'; }
pre.src-org:before { content: 'Org mode'; }
pre.src-oz:before { content: 'OZ'; }
pre.src-plantuml:before { content: 'Plantuml'; }
pre.src-processing:before { content: 'Processing.js'; }
pre.src-python:before { content: 'Python'; }
pre.src-R:before { content: 'R'; }
pre.src-ruby:before { content: 'Ruby'; }
pre.src-sass:before { content: 'Sass'; }
pre.src-scheme:before { content: 'Scheme'; }
pre.src-screen:before { content: 'Gnu Screen'; }
pre.src-sed:before { content: 'Sed'; }
pre.src-sh:before { content: 'shell'; }
pre.src-sql:before { content: 'SQL'; }
pre.src-sqlite:before { content: 'SQLite'; }
/* additional languages in org.el's org-babel-load-languages alist */
pre.src-forth:before { content: 'Forth'; }
pre.src-io:before { content: 'IO'; }
pre.src-J:before { content: 'J'; }
pre.src-makefile:before { content: 'Makefile'; }
pre.src-maxima:before { content: 'Maxima'; }
pre.src-perl:before { content: 'Perl'; }
pre.src-picolisp:before { content: 'Pico Lisp'; }
pre.src-scala:before { content: 'Scala'; }
pre.src-shell:before { content: 'Shell Script'; }
pre.src-ebnf2ps:before { content: 'ebfn2ps'; }
/* additional language identifiers per "defun org-babel-execute"
in ob-*.el */
pre.src-cpp:before { content: 'C++'; }
pre.src-abc:before { content: 'ABC'; }
pre.src-coq:before { content: 'Coq'; }
pre.src-groovy:before { content: 'Groovy'; }
/* additional language identifiers from org-babel-shell-names in
ob-shell.el: ob-shell is the only babel language using a lambda to put
the execution function name together. */
pre.src-bash:before { content: 'bash'; }
pre.src-csh:before { content: 'csh'; }
pre.src-ash:before { content: 'ash'; }
pre.src-dash:before { content: 'dash'; }
pre.src-ksh:before { content: 'ksh'; }
pre.src-mksh:before { content: 'mksh'; }
pre.src-posh:before { content: 'posh'; }
/* Additional Emacs modes also supported by the LaTeX listings package */
pre.src-ada:before { content: 'Ada'; }
pre.src-asm:before { content: 'Assembler'; }
pre.src-caml:before { content: 'Caml'; }
pre.src-delphi:before { content: 'Delphi'; }
pre.src-html:before { content: 'HTML'; }
pre.src-idl:before { content: 'IDL'; }
pre.src-mercury:before { content: 'Mercury'; }
pre.src-metapost:before { content: 'MetaPost'; }
pre.src-modula-2:before { content: 'Modula-2'; }
pre.src-pascal:before { content: 'Pascal'; }
pre.src-ps:before { content: 'PostScript'; }
pre.src-prolog:before { content: 'Prolog'; }
pre.src-simula:before { content: 'Simula'; }
pre.src-tcl:before { content: 'tcl'; }
pre.src-tex:before { content: 'TeX'; }
pre.src-plain-tex:before { content: 'Plain TeX'; }
pre.src-verilog:before { content: 'Verilog'; }
pre.src-vhdl:before { content: 'VHDL'; }
pre.src-xml:before { content: 'XML'; }
pre.src-nxml:before { content: 'XML'; }
/* add a generic configuration mode; LaTeX export needs an additional
(add-to-list 'org-latex-listings-langs '(conf " ")) in .emacs */
pre.src-conf:before { content: 'Configuration File'; }
table { border-collapse:collapse; }
caption.t-above { caption-side: top; }
caption.t-bottom { caption-side: bottom; }
td, th { vertical-align:top; }
th.org-right { text-align: center; }
th.org-left { text-align: center; }
th.org-center { text-align: center; }
td.org-right { text-align: right; }
td.org-left { text-align: left; }
td.org-center { text-align: center; }
dt { font-weight: bold; }
.footpara { display: inline; }
.footdef { margin-bottom: 1em; }
.figure { padding: 1em; }
.figure p { text-align: center; }
.inlinetask {
padding: 10px;
border: 2px solid gray;
margin: 10px;
background: #ffffcc;
}
#org-div-home-and-up
{ text-align: right; font-size: 70%; white-space: nowrap; }
textarea { overflow-x: auto; }
.linenr { font-size: smaller }
.code-highlighted { background-color: #ffff00; }
.org-info-js_info-navigation { border-style: none; }
#org-info-js_console-label
{ font-size: 10px; font-weight: bold; white-space: nowrap; }
.org-info-js_search-highlight
{ background-color: #ffff00; color: #000000; font-weight: bold; }
.org-svg { width: 90%; }
/*]]>*/-->
</style>
<link rel="stylesheet" type="text/css" href="solarized-light.css" />
<script type="text/javascript">
/*
@licstart The following is the entire license notice for the
JavaScript code in this tag.
Copyright (C) 2012-2013 Free Software Foundation, Inc.
The JavaScript code in this tag is free software: you can
redistribute it and/or modify it under the terms of the GNU
General Public License (GNU GPL) as published by the Free Software
Foundation, either version 3 of the License, or (at your option)
any later version. The code is distributed WITHOUT ANY WARRANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
As additional permission under GNU GPL version 3 section 7, you
may distribute non-source (e.g., minimized or compacted) forms of
that code without the copy of the GNU GPL normally required by
section 4, provided you include this license notice and a URL
through which recipients can access the Corresponding Source.
@licend The above is the entire license notice
for the JavaScript code in this tag.
*/
<!--/*--><![CDATA[/*><!--*/
function CodeHighlightOn(elem, id)
{
var target = document.getElementById(id);
if(null != target) {
elem.cacheClassElem = elem.className;
elem.cacheClassTarget = target.className;
target.className = "code-highlighted";
elem.className = "code-highlighted";
}
}
function CodeHighlightOff(elem, id)
{
var target = document.getElementById(id);
if(elem.cacheClassElem)
elem.className = elem.cacheClassElem;
if(elem.cacheClassTarget)
target.className = elem.cacheClassTarget;
}
/*]]>*///-->
</script>
</head>
<body>
<div id="preamble" class="status">
<a name="top" id="top"></a>
</div>
<div id="content">
<div class="org-center">
<div class="figure">
<p><img src="images/logo.png" alt="logo.png" />
</p>
</div>
</div>
<center>
<h1>Mesh Network</h1>
</center>
<table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
<colgroup>
<col class="org-left" />
</colgroup>
<tbody>
<tr>
<td class="org-left"><a href="#org7571d97">What is a mesh network?</a></td>
</tr>
<tr>
<td class="org-left"><a href="#org723a71f">The Freedombone Mesh</a></td>
</tr>
<tr>
<td class="org-left"><a href="#org20b8881">Installation</a></td>
</tr>
<tr>
<td class="org-left"><a href="#orge8c3e69">Wifi adaptors</a></td>
</tr>
<tr>
<td class="org-left"><a href="#org123d626">Using the mesh</a></td>
</tr>
<tr>
<td class="org-left"><a href="#org2fe4976">Further reading</a></td>
</tr>
</tbody>
</table>
<div id="outline-container-org7571d97" class="outline-2">
<h2 id="org7571d97">What is a mesh network?</h2>
<div class="outline-text-2" id="text-org7571d97">
<p>
The internet as it currently exists is mostly organised according to a client/server model. Servers run the web services and store the data and clients are the laptops, desktops and other devices accessing the servers. In a mesh network there isn't any clear division between clients and servers. The computers on a mesh network are known as "peers" and they can perform the functions of both clients and servers. Commonly this is also known as a "peer to peer" network.
</p>
<p>
The client/server and mesh network models have advantages and disadvantages. If the server in a client/server system fails then you can have catastrophic service outages which affect many users. If a peer in a mesh network fails then the other peers may be mostly unaffected and communications can continue. The disadvantage of mesh networks is that each peer relays data for other peers and so the bandwidth usage by each peer may be higher than for a client in a client/server system. However, with modern hardware that's not much of an issue.
</p>
<p>
Mesh networks are useful for building local and highly resillient communications infrastructure which can be put together rapidly, in situations where the ordinary internet is either unavailable or untrustworthy.
</p>
<p>
Example use cases would be:
</p>
<ul class="org-ul">
<li>Conferences / Exhibitions</li>
<li>Local community networks, not run by telcos or ISPs</li>
<li>Emergency services / Disaster relief</li>
<li>Camp sites</li>
<li>War zones</li>
<li>Scientific expeditions to remote areas</li>
<li>Onboard smaller ships without satellite internet, captain/crew communications</li>
<li>Underground (mines or caves)</li>
<li>Protests / Occupations of buildings</li>
<li>Eventually in space for manned missions to other planets, moons or asteroids</li>
</ul>
</div>
</div>
<div id="outline-container-org723a71f" class="outline-2">
<h2 id="org723a71f">The Freedombone Mesh</h2>
<div class="outline-text-2" id="text-org723a71f">
<p>
The Freedombone mesh is offline - in the sense of not being part of the larger internet - and consists of a set of computers with the software installed communicating wirelessly using ordinary wifi. Peers can enter or leave the network and it will adjust automatically. All communications between peers is end-to-end encrypted, so although it's easy to join the network it's not easy to passively evesdrop.
</p>
</div>
</div>
<div id="outline-container-org20b8881" class="outline-2">
<h2 id="org20b8881">Installation</h2>
<div class="outline-text-2" id="text-org20b8881">
</div><div id="outline-container-org865e6de" class="outline-3">
<h3 id="org865e6de">Two types of system</h3>
<div class="outline-text-3" id="text-org865e6de">
<p>
Installation is split into two categories, <i>routers</i> and <i>user devices</i>.
</p>
<p>
A router is a computer which is dedicated to moving network traffic and building out the mesh infrastructure. It's not primarily intended to have a user interface. Hardware such as the Beaglebone Black is ideal for this, because it's small, inexpensive and doesn't consume much electrical power and so can be fitted in any location where an electricity supply is available.
</p>
<p>
Small computers acting as mesh routers can also be battery operated or solar powered so that the network need not be statically sited. They could be included in a backpack for camping, fitted within moving vehicles, strapped to protest placards or attached to <a href="https://www.youtube.com/watch?v=Wwsy9MThwns">large tethered helium balloons</a> (like weather balloons) to help provide a local and transient communications system.
</p>
<p>
<i>User devices</i> are the computers with which you would typically access the internet - laptops, desktop machines, netbooks or any other device which can run a Debian-based distro (eg. Ubuntu) with a working wifi connection.
</p>
</div>
</div>
<div id="outline-container-org6438efa" class="outline-3">
<h3 id="org6438efa">Installing on routers</h3>
<div class="outline-text-3" id="text-org6438efa">
<p>
Whatever system you're going to use as a mesh router should have a new Debian Jessie install on it. It's advisable that this be a new install so that there is no existing software on the system which could confuse the mesh install process.
</p>
<p>
Some recommended hardware:
</p>
<ul class="org-ul">
<li>Beaglebone Black</li>
<li>5V power supply</li>
<li>Ethernet cable (for installation of the software)</li>
<li>8GB microSD card, or larger</li>
<li>Wireless N USB Adapter TPE-N150USB</li>
</ul>
<p>
If you are using the Beaglebone Black then you'll need to install the Debian image to the microSD card. You can find details of how to do that <a href="./installation.html">here</a>.
</p>
<p>
Connect your system to your internet router with an ethernet cable, then ssh into it and type:
</p>
<div class="org-src-container">
<pre class="src src-bash">su
apt-get update
apt-get install git build-essential dialog
git clone https://github.com/bashrc/freedombone
<span class="org-builtin">cd</span> freedombone
make install
</pre>
</div>
<p>
At this point if you are using a system or dongle with an Atheros AR9271 wifi chipset then you may want to install some pre-compiled firmware (you can compile it from source, but it takes a long time - especially on the Beaglebone Black). If you need to do that then see the wifi adaptor notes below.
</p>
<p>
Then to begin the install:
</p>
<div class="org-src-container">
<pre class="src src-bash">freedombone menuconfig
</pre>
</div>
<p>
Select the "<i>mesh (router)</i>" install variant, give an ESSID or just hit enter for the default. If discression is important then use an ESSID similar to those already in the area. The ESSID must be the same on every mesh peer. Assign this mesh peer a name. In order to avoid confusions it's important that the name should be unique on the network and contain no spaces. So maybe a word followed by some numbers, or the name of the place where the router will be installed.
</p>
<p>
If you're installing on a Beaglebone Black then after a while the system will reboot and you will need to ssh in again and run:
</p>
<div class="org-src-container">
<pre class="src src-bash"><span class="org-builtin">cd</span> freedombone
freedombone -c freedombone.cfg
</pre>
</div>
<p>
The reboot is needed in order to enable zram and the hardware random number generator.
</p>
</div>
</div>
<div id="outline-container-org7952cce" class="outline-3">
<h3 id="org7952cce">Installing on user devices</h3>
<div class="outline-text-3" id="text-org7952cce">
<p>
Typically on a laptop with a Debian-based distro installed, open a terminal and type:
</p>
<div class="org-src-container">
<pre class="src src-bash">sudo apt-get update
sudo apt-get install git build-essential dialog
git clone https://github.com/bashrc/freedombone
<span class="org-builtin">cd</span> freedombone
sudo make install
freedombone menuconfig
</pre>
</div>
<p>
Select the "<i>mesh (user device)</i>" variant and set the same ESSID as you did for the routers, or just hit enter for the default.
</p>
<p>
An important point is that on older Debian-based systems, such as Ubuntu 14.04 or Trisquel 7, you may need to install a more recent version of <i>batctl</i>. An example is as follows.
</p>
<div class="org-src-container">
<pre class="src src-bash">sudo apt-get remove --purge batctl
wget http://mirrors.kernel.org/ubuntu/pool/universe/b/batctl/batctl_2014.1.0-2_amd64.deb
sudo dpkg -i batctl_2014.1.0-2_amd64.deb
</pre>
</div>
</div>
</div>
</div>
<div id="outline-container-orge8c3e69" class="outline-2">
<h2 id="orge8c3e69">Wifi adaptors</h2>
<div class="outline-text-2" id="text-orge8c3e69">
<p>
There are a small number of wifi adaptors which are compatible with a fully free software stack.
</p>
</div>
<div id="outline-container-orgc1ab644" class="outline-3">
<h3 id="orgc1ab644">Atheros AR9271</h3>
<div class="outline-text-3" id="text-orgc1ab644">
<p>
To install the firmware for this:
</p>
<div class="org-src-container">
<pre class="src src-bash"><span class="org-builtin">cd</span> freedombone/drivers
sha256sum ath9k_htc_driver_bbb.tar.gz
7eb9324681f03c7630ed01e490ea447dfbd96c9b5389e45b64e4646d1be16ff1
tar -xvzf ath9k_htc_driver_bbb.tar.gz
mv *.fw /lib/firmware
<span class="org-builtin">cd</span> ..
</pre>
</div>
</div>
</div>
</div>
<div id="outline-container-org123d626" class="outline-2">
<h2 id="org123d626">Using the mesh</h2>
<div class="outline-text-2" id="text-org123d626">
<p>
The following sections only apply to <i>client devices</i>. Mesh <i>routers</i> are only for routing network traffic and operating <a href="https://en.wikipedia.org/wiki/BitTorrent_tracker">trackers</a> and <a href="https://en.wikipedia.org/wiki/Distributed_hash_table">distributed hash tables</a> for bootstrapping purposes.
</p>
</div>
<div id="outline-container-orgc862ae7" class="outline-3">
<h3 id="orgc862ae7">Switching from internet to mesh mode</h3>
<div class="outline-text-3" id="text-orgc862ae7">
<p>
To join the mesh network open a terminal and type:
</p>
<div class="org-src-container">
<pre class="src src-bash">meshweb
</pre>
</div>
<p>
If you want to have your system as a permanent mesh peer then you could add that command to your startup applications so that it activates whenever the computer starts up.
</p>
<p>
A web page should appear in your browser, which then allows you to access communication services on the mesh. These pages should update automatically, so that if peers enter or leave the network the lists will change accordingly.
</p>
<p>
If for any reason things don't seem to be updating you can force an update by issuing the command:
</p>
<div class="org-src-container">
<pre class="src src-bash">zeronetavahi
</pre>
</div>
</div>
</div>
<div id="outline-container-org193f44f" class="outline-3">
<h3 id="org193f44f">Chat</h3>
<div class="outline-text-3" id="text-org193f44f">
<p>
If you have a Tox client installed on your system then you can use that to communicate with other mesh peers. A limitation is that if peers change you may need to quit the application and restart it in order to receive the updated list of DHTnodes. The <a href="https://github.com/Tox/toxic">Toxic</a> client is installed by default, but you may also want to install <a href="https://github.com/tux3/qTox">qTox</a> for a more conventional-looking user experience.
</p>
<p>
You can obtain Tox IDs for users on the network via the initial web page.
</p>
<p>
To launch the <a href="https://github.com/Tox/toxic">Toxic client</a> in a terminal type:
</p>
<div class="org-src-container">
<pre class="src src-bash">toxic
</pre>
</div>
<p>
The first time you will be asked whether you wish to encrypt the data file used for your settings. Select "no" for this, otherwise the system will not be able to obtain your public key and broadcast it to other peers in the network. Even if you select "yes" the system will still be usable, but it will not be so easy for other peers on the network to find you unless you have previously exchanged your Tox ID via some out-of-band method.
</p>
<p>
Then to add a new friend:
</p>
<div class="org-src-container">
<pre class="src src-bash">/nick mynickname
/add &lt;friend Tox ID&gt;
</pre>
</div>
<p>
Your friend will need to approve the request, and then you can chat via text or voice using <i>CTRL-o</i> and <i>CTRL-p</i> to switch between screens and cursor keys plus Enter to select users.
</p>
<p>
Another thing worth knowing is that if you were already using a Tox client before running the <i>meshweb</i> command then it's a good idea to close and reopen it, so that the list of bootstrap nodes is updated. The same also applies when exiting the mesh and returning to the internet.
</p>
<p>
A note for the security-conscious is that broadcasting Tox IDs via the network (using Avahi) is convenient but not highly secure. An adversary could maybe join the network and create decoy peers to try to disrupt the communications and have messages going to the wrong places. For the best security exchange Tox IDs in advance by some method other than looking them up from the initial mesh web page.
</p>
</div>
</div>
<div id="outline-container-orge82459e" class="outline-3">
<h3 id="orge82459e">Blogging</h3>
<div class="outline-text-3" id="text-orge82459e">
<p>
The Freedombone mesh uses a fully decentralized blogging system called <a href="https://github.com/HelloZeroNet/ZeroBlog">ZeroBlog</a>. It behaves rather like other peer-to-peer file sharing systems in that if you are reading the blog of another user you are also simultaneously seeding it to other peers (acting as both a client and a server). This allows the system to scale well, while also being robust to any peer failing or leaving the network.
</p>
<p>
All blogs on the mesh are public, so any user joining the mesh can read any other blog. Network traffic is encrypted between peers, so passive snooping will be hard, and also the integrity of data is checked via certificates so that you can be reasonably confident that nefarious content has not been added or removed from the data stream while in transit through the network.
</p>
<p>
This type of content creation and delivery provides a good template for what the conventional internet should ultimately be like if it is to be robust, trustworthy and resistant to censorship or damage.
</p>
<p>
To add a new blog entry click the <i>new post</i> button, edit the title and content (clicking <i>save</i> at the bottom of the screen after each). Then when you are done click on the <i>publish</i> button at the bottom of the screen. And that's all there is to it.
</p>
</div>
</div>
<div id="outline-container-org35fb05a" class="outline-3">
<h3 id="org35fb05a">Other services</h3>
<div class="outline-text-3" id="text-org35fb05a">
<p>
It is hoped that a decentralized forum will be added, but this is not yet complete. In the mean time a substitute is to use the Tox group chat feature.
</p>
</div>
</div>
<div id="outline-container-org1bfcc2c" class="outline-3">
<h3 id="org1bfcc2c">Turning off the mesh</h3>
<div class="outline-text-3" id="text-org1bfcc2c">
<p>
If you wish to return to the internet then open a terminal and type:
</p>
<div class="org-src-container">
<pre class="src src-bash">sudo batman stop
</pre>
</div>
<p>
After a few seconds your usual internet wifi connection should be re-established.
</p>
</div>
</div>
</div>
<div id="outline-container-org2fe4976" class="outline-2">
<h2 id="org2fe4976">Further reading</h2>
<div class="outline-text-2" id="text-org2fe4976">
<p>
For much more extensive details about deploying wireless networks there is an excellent book called <a href="https://wndw.net/">Wireless Networking in the Developing World</a> which is worth reading. It's not necessarily exclusively about mesh networks, but may be useful in terms of advice about antennas, reflections, extending wifi range and so on.
</p>
<center>
Return to the <a href="index.html">home page</a>
</center>
</div>
</div>
</div>
<div id="postamble" class="status">
<style type="text/css">
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
}
</style>
<div class="back-to-top">
<a href="#top">Back to top</a> | <a href="mailto:bob@robotics.uk.to">E-mail me</a>
</div>
<script type="text/javascript">
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
</script>
</div>
</body>
</html>