CSS3 Animated Back To Top Button With jQuery - Gototop

Gototop is a jQuery plugin which generates a custom scroll to top at the 'Bottom Right' of the webpage, allowing the user to scroll the webpage to the top with a smooth scrolling experience. The back to top button will be displayed when you scroll down the webpage and reach a specific position (default: 500px). You can also specify the top position where you want the webpage scroll back to.

How to use it:

1. Download the plugin and place the JavaScript file jquery.gototop.js after JQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.gototop.js"></script>

2. Create the back to top button and place it anywhere on the webpage.

<button class="gototop">
  <span>GO TO TÖP</span>
</button>

3. The CSS/CSS3 styles for the back to top button.

.gototop {
  display: none;
  -webkit-animation: hide 350ms ease-out forwards 1;
  animation: hide 350ms ease-out forwards 1;
  padding: 16px 32px;
  border: 0;
  text-align: center;
  background-color: #FD1472;
  color: #fff;
  position: fixed;
  bottom: 16px;
  right: 16px;
  box-shadow: 0 2px 10px rgba(253, 20, 114,.5);
  -webkit-transition: background-color 100ms ease-in-out;
  transition: background-color 100ms ease-in-out;
}

.gototop > span {
  display: inline-block;
  -webkit-transition: transform 100ms 100ms ease-in-out;
  transition: transform 100ms 100ms ease-in-out;
}

.gototop:hover, .gototop:focus { background-color: #FD3D8A; }

.gototop:hover > span, .gototop:focus > span {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

.isvisible {
  -webkit-animation: show 1s ease-out forwards 1;
  animation: show 1s ease-out forwards 1;
}.gototop {
  display: none;
  -webkit-animation: hide 350ms ease-out forwards 1;
  animation: hide 350ms ease-out forwards 1;
  padding: 16px 32px;
  border: 0;
  text-align: center;
  background-color: #FD1472;
  color: #fff;
  position: fixed;
  bottom: 16px;
  right: 16px;
  box-shadow: 0 2px 10px rgba(253, 20, 114,.5);
  -webkit-transition: background-color 100ms ease-in-out;
  transition: background-color 100ms ease-in-out;
}

.gototop > span {
  display: inline-block;
  -webkit-transition: transform 100ms 100ms ease-in-out;
  transition: transform 100ms 100ms ease-in-out;
}

.gototop:hover, .gototop:focus { background-color: #FD3D8A; }

.gototop:hover > span, .gototop:focus > span {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

.isvisible {
  -webkit-animation: show 1s ease-out forwards 1;
  animation: show 1s ease-out forwards 1;
}

@-webkit-keyframes 
hide {  0% {
 opacity: 1;
 -webkit-transform:translateY(0);
}
 25% {
 opacity: .5;
 -webkit-transform: rotate(-3deg) translateY(-40px);
}
 75% {
 -webkit-transform: rotate(3deg);
}
 100% {
 opacity: 0;
 -webkit-transform:translateY(100px);
}
}

@keyframes 
hide {  0% {
 opacity: 1;
 transform:translateY(0);
}
 25% {
 opacity: .5;
 transform: rotate(-3deg) translateY(-40px);
}
 75% {
 transform: rotate(3deg);
}
 100% {
 opacity: 0;
 transform:translateY(100px);
}
}

@-webkit-keyframes 
show {  0% {
 -webkit-transform: rotate(0deg);
}
 25% {
 opacity: .5;
 -webkit-transform: rotate(-3deg) translateY(-40px);
}
 75% {
 -webkit-transform: rotate(3deg);
}
 100% {
 opacity: 1;
 -webkit-transform: rotate(0deg);
}
}

@keyframes 
show {  0% {
 transform: rotate(0deg);
}
 25% {
 opacity: .5;
 transform: rotate(-3deg) translateY(-40px);
}
 75% {
 transform: rotate(3deg);
}
 100% {
 opacity: 1;
 transform: rotate(0deg);
}
}

4. Initialize the back to top button with default options.

$(".gototop").gototop();

5. Plugin's default options.

$(".gototop").gototop({

  // where to scroll back to
  position : 50,

  // animation speed
  duration : 3000,

  // cusotm css class
  classname : "isvisible",

  // where to display the button
  visibleAt : 500
  
});

---

This awesome jQuery plugin is developed by alejandromur. For more Advanced Usages, please check the demo page or visit the official website.