Skip to content

Instantly share code, notes, and snippets.

@antoniofrignani

antoniofrignani/index.html

Last active June 28, 2018 13:36
Show Gist options
  • Save antoniofrignani/5867241 to your computer and use it in GitHub Desktop.
Save antoniofrignani/5867241 to your computer and use it in GitHub Desktop.
Download ZIP
Back To top CSS
Raw
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en-US"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en-US"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class=" js no-touch svg inlinesvg svgclippaths no-ie8compat" lang="en-US" style="overflow: hidden;" id="ls-global"><!--<![endif]-->
<head>
</head>
<body>
<a href="#" id="linkTop" class="backtotop"></a>
</body>
Raw
scrollToTop.js
jQuery(document).ready(function() {
jQuery(".backtotop").addClass("hidden");
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() === 0) {
jQuery(".backtotop").addClass("hidden")
} else {
jQuery(".backtotop").removeClass("hidden")
}
});
jQuery('.backtotop').click(function () {
jQuery('body,html').animate({
scrollTop:0
}, 1200);
return false;
});
});
Raw
style.css
/* Behaviors */
.backtotop {
position: fixed;
right: 20px;
bottom: 20px;
width: 45px;
height: 45px;
display: block;
z-index: 99999999;
border-radius: 100em;
behavior:url(border-radius.htc);
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.backtotop:before {
content: '\e75f';
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 40px;
font-size: 23px;
line-height: 36px;
left: 0;
text-align: center;
font-variant: normal;
text-transform: none;
position: absolute;
}
.backtotop.hidden {
bottom: -100px
}
/* Colors */
.backtotop {
border: 3px solid #26bdef;
}
.backtotop:hover{
color: #f36f5f;
border-color: #f36f5f;
}
Raw
style.txt
/* Behaviors */
.backtotop {
position: fixed;
right: 20px;
bottom: 20px;
width: 45px;
height: 45px;
display: block;
z-index: 99999999;
border-radius: 100em;
behavior:url(border-radius.htc);
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.backtotop:before {
content: '\e75f';
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 40px;
font-size: 23px;
line-height: 36px;
left: 0;
text-align: center;
font-variant: normal;
text-transform: none;
position: absolute;
}
.backtotop.hidden {
bottom: -100px
}
/* Colors */
.backtotop {
border: 3px solid #26bdef;
}
.backtotop:hover{
color: #f36f5f;
border-color: #f36f5f;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment