Scroll to top

Inori · 01-08-2016, 01:26 AM

Not that scrolling is annoying, but I feel like a little floating footer at the bottom of the window that scrolls you back to the top of the site would be nice and convenient. Using the jQuery, CSS, and HTML below, coupled with the scroll function I detailed here nothing else needs to be changed.

HTML (insert anywhere, doesn't matter):

Code:
<div id="footer">
	<a href="#bridge" id="to_top">Scroll to top.</a>
</div>

CSS:

Code:
#footer{
	position:fixed;
	bottom:0;
	min-width:100%;
	text-align:center;
	margin-left:-19.6%;
	padding-bottom:3px;
	font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:14px;
	background-color:rgba(80,80,80,0.75);
	z-index:200;
	box-shadow:0px 0px 12px 0px rgba(0,0,0,0.75)
}

#to_top{
	color:#afafaf
}

#to_top:hover{
	text-decoration: none
}

jQuery:

Code:
$(document).ready(function(){
	$('#footer').fadeOut(0);
});
$(document).scroll(function(){
	var y=$(this).scrollTop();
	if(y>300){
		$('#footer').fadeIn(500);
  	}else{
    		$('#footer').fadeOut(500);
  	}
});

I just implemented this on my project page, and I think it'd be a nice addition.

Scroll to top
Author Message