Scroll to top design 2

Developer
Mike
Size
2,213 Kb
Views
4,048
  1. Scroll to top design 2 Previews
  2. Scroll to top design 2 HTML Codes
  3. Scroll to top design 2 CSS Codes

How do I make an scroll to top design 2?

What is a scroll to top design 2? How do you make a scroll to top design 2? This script and codes were developed by Mike on 01 February 2023, Wednesday.

Scroll to top design 2 Previews
IQ Test

Scroll to top design 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scroll to top design 2</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-hQpvDQiCJaD2H465dQfA717v7lu5qHWtDbWNPvaTJ0ID5xnPUlVXnKzq7b8YUkbN" crossorigin="anonymous">
<div class="icon-effect">	<a href="#" class="circle"> <i class="fa fa-chevron-up animate-up"></i> </a>
</div>
</body>
</html>

Scroll to top design 2 - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext);
body { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; background: #b7b7b7; font-family: Lato;
}
a:hover { text-decoration: none;
}
.circle { display: inline-block; font-size: 20px; /* icon size */ cursor: pointer; margin: 15px 30px; width: 40px; height: 40px; border-radius: 50%; text-align: center; position: relative; color: #b7b7b7;
}
/* Inside .icon-effect 
 */
.icon-effect .circle { background: #323496;	overflow: hidden;	-webkit-transition: background 0.5s, color 0.5s, box-shadow 0.5s;	-moz-transition: background 0.5s, color 0.5s, box-shadow 0.5s;	transition: background 0.5s, color 0.5s, box-shadow 0.5s;
}
.icon-effect .circle:hover { background: #b7b7b7; color: #FFFFFF; border: 2px solid white; box-shadow: 0 0 0 6px rgba(255,255,255,0.3);
}
/* Inside .circle  / Animate class inside circle to target icon */
.circle:hover .animate-up {	-webkit-animation: toTopFromBottom 0.5s forwards;	-moz-animation: toTopFromBottom 0.5s forwards;	animation: toTopFromBottom 0.5s forwards;
}
@-webkit-keyframes toTopFromBottom {	49% {	-webkit-transform: translateY(-100%);	}	50% {	opacity: 0;	-webkit-transform: translateY(100%);	}	51% {	opacity: 1;	}
}
@-moz-keyframes toTopFromBottom {	49% {	-moz-transform: translateY(-100%);	}	50% {	opacity: 0;	-moz-transform: translateY(100%);	}	51% {	opacity: 1;	}
}
@keyframes toTopFromBottom {	49% {	transform: translateY(-100%);	}	50% {	opacity: 0;	transform: translateY(100%);	}	51% {	opacity: 1;	}
}
Mike (mikestabile) Script Codes
Name
Business Card Sample Using jQuery Flip
JQuery Smooth Scroll
Materialize Card
Hero with bottom banner
Bill Pay Intro Carousel
A Pen by Mike
Bill Pay Banner Ad
Bootstrap Tour Example
Styled radio buttons
Scroll to top design 1
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!