How to use scroll to top jQuery


Create a div, and put a link in it. #top href is a fallback, in case jQuery does not work, a click on the link still jumps to top of the page.

<div id="scroll-to-top"><a href="#top">Scroll to top</a></div>


This stylesheet place the scroll-to-top div in bottom right corner of the screen. The link changes color on hover.

#scroll-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
#scroll-to-top a {
	color: #000;
	text-decoration: none;
#scroll-to-top a:hover {
	color: #f00;


I load jquery-1.7.2.min.js into my HTML.

<script src="js/jquery-1.7.2.min.js"></script>

This jQuery fades and hides the scroll-to-top div, and makes scroll to top animation.

	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 300) {
			} else {

		$('#scroll-to-top a').click(function () {
				scrollTop: 0
			}, 700);
			return false;

Demo »


Related articles

Vecteezy - Free Vector Art

Vecteezy - Free Vector Art


If you need Free Vector Art do not hesitate: visit

Free vector icons

Free vector icons


Want to have some vector icons, free? Try this nice website.

Beautiful free stock photos from StockSnap

Beautiful free stock photos from StockSnap


Would you like some cool stock photos for free? Check out this article, and try this website.

1 comment

mayank2013-02-09 12:16

Nice scrolling....Thanks

Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the lion *

Find us on Facebook



Back to Top