Skip to content

Instantly share code, notes, and snippets.

@ZachMoreno

ZachMoreno/scroll-to-top-example.html

Created December 4, 2014 16:15
Show Gist options
  • Save ZachMoreno/15c06d1efcb9a6f71e52 to your computer and use it in GitHub Desktop.
Save ZachMoreno/15c06d1efcb9a6f71e52 to your computer and use it in GitHub Desktop.
Download ZIP
depends on jquery & animate.css
Raw
scroll-to-top-example.html
<!doctype html>
<html>
<head>
<title></title>
<style>
/* fab */
.fab {
height: 56px;
width: 56px;
border-radius: 50%;
box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
box-sizing: content-box;
border: none;
cursor: pointer;
outline: none;
padding: 0;
z-index: 99;
}
.fab.yellow {
background-color: #FFEB3B;
color: #FF8F00;
}
.fab.blue {
background-color: #4d7fb2;
color: #fff;
}
.fab p {
font-size: 45px;
margin-top: -11px;
text-align: center;
font-family: "Open Sans";
}
</style>
</head>
<body>
<!-- back to top -->
<a href="#meeting-info">
<button class="fab blue" id="back-to-top">
<p>&#xffea;</p>
</button>
</a>
</body>
</html>
Raw
scroll-to-top.js
// scroll to top
jQuery(window).on('scroll', function() {
scrollPosition = jQuery(this).scrollTop();
if (scrollPosition >= 600) {
jQuery("#back-to-top").removeClass("fadeOutDown").addClass("animated fadeInUp");
jQuery("#back-to-top p").removeClass("rotateOut").addClass("animated rotateIn");
} else if (scrollPosition < 600) {
jQuery("#back-to-top").removeClass("fadeInUp").addClass("animated fadeOutDown");
jQuery("#back-to-top p").removeClass("rotateIn").addClass("animated rotateOut");
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment