<div id="back-top">
  Back to top <span class="rocket">🚀</span>
</div>

<!-- Content to fill the page -->
<div class="content">
  <h1>Rocket Back to Top Button</h1>
  <h2><i>Scroll down the page</i></h2>
  <p>This is the Back to Top button I use on my website, <a href="http://www.hmz.ie">check it here</a></p>
  <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Living_Large_--_Argonne%27s_First_Computer_%288056998342%29.jpg" width="100%" />
  <small>Photo from <a href="https://commons.wikimedia.org/wiki/File:Living_Large_--_Argonne%27s_First_Computer_(8056998342).jpg">Wikimedia</a></small>
  <p>Example text from my article: What If Your Grandmother Was The User? <a href="http://www.hmz.ie/what-if-your-grandmother-was-the-user/">Read the full article here</a></p>
  <p>All of us were amazed by the recent achievement of Nasa’s launch, and mostly we liked how the control panel (dashboard) of the Dragon 2 capsule looked. I wanted to share the lesson learnt from this, how a simple administration panel could control complex machines. And if a space capsule can achieve this, your next application can do this easily.</p>
  <p>Back in 2003, I was starting my business as a web development/web hosting services provider; I did not expect the high number of jobs that I would score. For that, I started hiring freelancers to help me get projects done. I would meet the clients, understand requirements, design the interfaces, and the freelancers’ job was to code the project. I was always checking and testing the projects before they get delivered to the clients. I used to cover security, usability, code quality, and performance before the delivery.</p>
  <p>Once, I got a significant project from an important client, and I thought this project would help my company reputation because it’s a public website, and the client had a perfect circle of potential clients.
    Towards the end of the project, I had to travel for a month. I asked the freelancer to upload the website to the server directly without my approval.</p>
  <p>On that day, I got an outraged email from the client about the website, and he asked for a meeting as soon as I come back. I visited the website and checked; the work was perfect. The site is highly performing, the design is accurate, all functionalities were excellent, and to be honest, I didn’t know what the client wanted to meet. <a href="http://www.hmz.ie/what-if-your-grandmother-was-the-user/">Read the full article here</a></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dolor libero, ornare in eros sit amet, consectetur ultricies metus. Fusce semper porttitor sem, non lobortis libero vulputate nec. Curabitur in sapien tincidunt, luctus mauris id, auctor dolor. Sed quis purus at tortor pulvinar volutpat eu sed massa. Suspendisse elementum a dui porttitor facilisis. Cras molestie maximus leo, sed malesuada est porta ac. Sed id sodales nulla. Pellentesque ut velit in nisl convallis porttitor eget ac magna.</p>
  <p>Ut luctus, purus et condimentum blandit, nisl ipsum lacinia sapien, ut facilisis massa massa posuere mi. Cras sed placerat dolor. Morbi ligula mi, tristique sed hendrerit blandit, eleifend vel libero. Fusce enim risus, commodo sit amet tempor eget, consectetur et lorem. In sed ullamcorper nunc. Maecenas faucibus accumsan lacus, eu consequat nisl vestibulum in. In eu gravida nisi. Vivamus id ante at nunc cursus egestas. Nunc ut lectus ultricies, dapibus orci non, tristique eros. Etiam eget leo nec felis scelerisque tincidunt.</p>
  <p>Ut rhoncus sagittis lacus, vel condimentum mi dictum eu. Cras porttitor libero nec metus auctor hendrerit. Vestibulum semper enim eu feugiat imperdiet. Aenean dapibus sed sem non ornare. Duis nec finibus eros, id congue risus. Aenean varius nisl sed commodo faucibus. Ut id volutpat arcu. Maecenas dignissim faucibus ultrices. Nunc fermentum lacus quis nibh blandit volutpat.</p>
  <p>Aenean ac dui sed massa tempor rutrum. Praesent in sollicitudin nisl, sit amet tincidunt dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque id interdum justo, sit amet tempus lorem. Suspendisse potenti. Cras lobortis augue nec tempus ultricies. Nullam ac purus non est placerat pellentesque. Fusce mauris ex, suscipit in volutpat a, consectetur sit amet ex. Integer consequat pharetra nulla, quis pharetra metus consequat at. Praesent sodales risus sit amet felis suscipit efficitur. Suspendisse arcu felis, commodo sed condimentum non, euismod non dolor. Duis nisi purus, condimentum a tortor ut, ultrices tempus nisi. Vivamus sodales erat sed posuere pretium. Aliquam erat volutpat.</p>
  <p>Curabitur finibus auctor odio non condimentum. Cras nec ligula non libero ultricies feugiat. Integer tempus auctor justo ac blandit. Nullam lorem lectus, fermentum vel faucibus a, commodo non enim. Mauris sed cursus mauris, at venenatis ligula. Ut dapibus congue felis, a sollicitudin leo consequat id. Phasellus mattis nisl dolor, vitae porttitor erat congue sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras aliquam sit amet risus cursus blandit. Nulla in commodo arcu. Curabitur vitae mi eu quam mollis luctus in ut tortor. Suspendisse rhoncus, purus eleifend consequat aliquet, lectus sem aliquam dui, at feugiat sem quam vitae mauris. Praesent non laoreet mi, consectetur pellentesque dui.</p>
</div>

body {
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  color: #6c767a;
  line-height: 1.9
}

a,
h1,
#back-top {
  color: #337ab7;
  text-decoration: none
}

h1,
h2 {
  font-family: "Prata", serif
}

.content {
  width: 75%;
  margin: 50px auto
}

#back-top {
  position: fixed;
  bottom: 0;
  left: 10%;
  z-index: 1000;
  display: none;
  cursor: pointer;
  font-size: 1.6rem;
  background: white;
  padding: 1rem
}

.fly {
  position: absolute;
  animation: launch ease-in-out 3s infinite;
  -webkit-animation: launch ease-in-out 3s infinite
}

@-webkit-keyframes launch {
  100% {
    transform: translateY(-800px) translateX(800px);
  }
}
@keyframes launch {
  100% {
    transform: translateY(-800px) translateX(800px);
  }
}
@media (min-width: 500px) {
  .content {
    width: 45%
  }
}

var btn = $("#back-top");

$(window).scroll(function () {
  $(this).scrollTop() > 100 ? btn.fadeIn() : btn.fadeOut();
});

btn.click(function () {
  $("body,html").animate({
      scrollTop: 0
    }, 1000);
  $(".rocket").addClass("fly");

  setTimeout(function () {
    $(".rocket").removeClass("fly");
  }, 1000);

  return false;
});


const funs = new Funs();
funs.signature();