Esküvő

How to use scroll to top jQuery

HTML

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>

CSS

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;
}

jQuery

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.

<script>
$(document).ready(function(){	
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 300) {
				$('#scroll-to-top').fadeIn();
			} else {
				$('#scroll-to-top').fadeOut();
			}
		});

		$('#scroll-to-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 700);
			return false;
		});
	});
	$("#scroll-to-top").hide();
});
</script>

Demo »


Esküvő


Related articles

Vecteezy - Free Vector Art

Vecteezy - Free Vector Art

05/08/2016

If you need Free Vector Art do not hesitate: visit Vecteezy.com

Free vector icons

Free vector icons

31/01/2016

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

Beautiful free stock photos from StockSnap

Beautiful free stock photos from StockSnap

11/12/2015

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

Tags

Esküvő

Back to Top