Basilico TopLink

Basilico TopLink creates a top button into your webpage: on bottom-right for desktops and on top for mobiles.
TopLink, on mobile, reacts according to mobile phones support touch or emulate mouse, just to give the best navigation experience.
TopLink uses CSS3 media query where available!.

JSDoc

/**
* basilicoTopLink(text, minWidth[,onVisibleOpacity, scrollEffect])
*
* Create a top button
* text: text to show
* minWidth: (alias breakpoint) if device resolution is greater than this value the button is on bottom-left else is on top
* onVisibleOpacity: 0.0 to 1.0 - the opacity of top button when visible, used where opacity is supported
* scrollEffect: true o false - if you want the scroll top animation - disabled in minWidth state
*/

How To Use:

You just find "/*!Customezeme!!*/" into source and customize the basilicoTopLink costructor params

Style customization

To customize the div contanier with CSS, it has only anchor tag, your have to make a rule with the selector #BasilicoTopLink and set !important for each declaration, to overwrite inline rules.

Download

Basilico TopLink v. 2 - minimized version - WordPress Plugin

Example

TopLink with css style in action on mobile and desktop

Javascript
You change the costructor:
new basilicoTopLink("^", 640, 1, true);


Css rules:
#BasilicoTopLink{
background: none repeat scroll 0 0 padding-box #272727;
border: 1px solid #000000;
border-radius: 9px 9px 9px 9px;
bottom: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.2) inset, 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 10px 10px rgba(255, 255, 255, 0.1) inset;
color: #FFFFFF;
padding: 15px 0 0 0 !important;
width:45px !important;
height:30px;
}
a#BasilicoTopLink {
text-decoration:none;
}
@media all and (max-width: minWidth) {}