Skip to content

Instantly share code, notes, and snippets.

@AlexKardone

AlexKardone/Smooth Scroll to top button + font awesome 1

Created February 6, 2018 05:08
Show Gist options
  • Save AlexKardone/0c89b031898a78e6cc52c1fce397ca50 to your computer and use it in GitHub Desktop.
Save AlexKardone/0c89b031898a78e6cc52c1fce397ca50 to your computer and use it in GitHub Desktop.
Download ZIP
Smooth Scroll to top button + font awesome
Raw
Smooth Scroll to top button + font awesome 1
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class='thetop'></div>
<div class='testheight'>Some exciting content... Scroll down for the button to appear.<br><br>
<i class="fa fa-4x fa-thumbs-up fa-spin"></i>
</div>
<div class='scrolltop'>
<div class='scroll icon'><i class="fa fa-4x fa-angle-up"></i></div>
</div>
Raw
Smooth Scroll to top button + font awesome 2
*{
font-family:tahoma;
}
/* .testheight Not required - unless testing ;) */
.testheight {
height:1200px;
font-size:20px;
text-align:center;
padding:100px 20px;
}
.scrolltop {
display:none;
width:100%;
margin:0 auto;
position:fixed;
bottom:20px;
right:10px;
}
.scroll {
position:absolute;
right:20px;
bottom:20px;
background:#b2b2b2;
background:rgba(178,178,178,0.7);
padding:20px;
text-align: center;
margin: 0 0 0 0;
cursor:pointer;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
.scroll:hover {
background:rgba(178,178,178,1.0);
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
.scroll:hover .fa {
padding-top:-10px;
}
.scroll .fa {
font-size:30px;
margin-top:-5px;
margin-left:1px;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
Raw
Smooth Scroll to top button + font awesome 3
$(window).scroll(function() {
if ($(this).scrollTop() > 50 ) {
$('.scrolltop:hidden').stop(true, true).fadeIn();
} else {
$('.scrolltop').stop(true, true).fadeOut();
}
});
$(function(){$(".scroll").click(function(){$("html,body").animate({scrollTop:$(".thetop").offset().top},"1000");return false})})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment