Back to top button/link

Back to top button/link

A handy back to top button/link using jQuery with scroll to plugin. I like the scroll to top effect, you can test it by pressing the button below this page. You'll know what I meant : ) Get jQuery scrollTo plugin         http://plugins.jquery.com/project/ScrollTo

$('#top').click(function() {
    $(document).scrollTo(0,500);
}

<a href="http://www.queness.com" rel="external">Queness in new window</a>

<ul>
    <li><a href="home">home</a></li>
    <li><a href="home">about</a></li>
    <li><a href="home">contact</a></li>
</ul>

<link rel="stylesheet" href="default.css" type="text/css">
......
<a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> 
<a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> 
<a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a>

<p></p>

<a href="#" id="close"></a>

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
......
<a id="top" style="cursor:hand;cursor:pointer">
Back to top

<div class="col" style="border:1px solid">Column One<br/>
With Two Line<br/>
And the height is different<br/><br/>
</div>
<div class="col" style="border:1px solid">Column Two<br/><br/></div>


<a class="increaseFont">+</a> | 
<a class="decreaseFont">-</a> | 
<a class="resetFont">=</a>


<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>
<div class="section2">This one is adjustable too!</div>