/* CSS */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.scroll-button {
  font-size: 1.2rem;
  line-height: 2rem;
  padding: 10px;
  border:1px solid #fff;
  width: 50px;
  height: 50px;
  background: #4c8fc6;
  color: white;
  position: fixed;
  right: 20px;
  bottom: 20px;
  visibility: visible;
  filter: alpha(opacity=50);
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.8;
  cursor: pointer;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -ms-transition: all 0.8s;
  -o-transition: all 0.8s;
}
.scroll-button:hover {
  filter: alpha(opacity=100);
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
.scroll-button--hidden {
  filter: alpha(opacity=0);
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  visibility: hidden;
}
<!-- HTML -->

<h1>Scroll down by 200px for button to appear</h1>
<ul>
  <li>Cross-browser</li>
  <li>Copy/Paste solution</li>
  <li>3 animate modes: <b>["normal"|"linear"|false]</b></li>
  <li>Customize your aniamtion with aveilable settings - make it snapy or fluent</li>
  <li>Double click to skip animation</li>
  <li>Every next single click adds initial speed</li>
  <li>Stop scroll animation by draging down the scroll bar</li>
  <li>Stop scroll animation by mouse wheel down</li>
  <li>Animated button fade-in-out on scroll</li>
</ul>

<br />
<br />
<pre>
// ------------------- USE EXAMPLE ---------------------
// *Set options
var options = {
  'showButtonAfter': 200, 
  'animate': "normal", //