Back to top

by Alex Fogarty

HTML

<button id="back-to-top">Back to Top</button>
<div class="container">
  <h1>Back to Top</h1>
  <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, neque doloremque quas, delectus pariatur maxime, eius nulla, voluptatum consequatur impedit obcaecati veniam deleniti illo ducimus eaque soluta eveniet voluptatem quia. Reprehenderit, quam alias hic debitis ab. Saepe ex voluptate dolor magnam quae! Culpa repellendus vero labore dolore, atque eius, dolor, illum quae cum voluptate quis quisquam omnis nostrum harum optio. Quasi dolorem officia illo, quo, nihil doloremque quia tempora ullam, totam porro quisquam perferendis praesentium quaerat esse! Nisi aliquid nihil placeat iste fugiat, itaque, sit, voluptate earum laborum minus et! Inventore repudiandae officiis, ab doloremque dolor quos officia voluptate autem dicta voluptatum! Minima deleniti earum inventore? Fuga, cupiditate. Itaque illo quibusdam nihil. Rem reiciendis quisquam odio quo eius, odit nemo.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet illo officiis sapiente recusandae quas fugiat omnis iusto, nihil quo possimus dignissimos magni, assumenda, reprehenderit voluptatum suscipit! Soluta odio omnis, cupiditate! Quisquam delectus doloribus quidem, rem cumque reprehenderit nobis nemo asperiores, voluptatum atque facilis, recusandae veritatis voluptate, dolorem autem? Molestias cum dolores voluptatibus, quo laborum esse in quam explicabo. Rem, debitis! Necessitatibus sed expedita cupiditate magnam vitae quaerat ad non sint ex cumque ipsa esse error beatae tenetur doloremque minus nesciunt, architecto repellat. Deleniti eveniet, itaque officia quidem tempore. Praesentium, veritatis. Mollitia nulla perferendis, rerum? Dicta laborum maiores aliquid sed quos id. Similique assumenda doloribus voluptatem voluptates illum dicta odio quae error. Quas laborum maiores modi at nam, alias totam, in!
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur...

CSS

html { font-family: Arial; color: #333; }

.container {
  width: 500px;
  margin: 0 auto;
}

#back-to-top {
  cursor: pointer;
  position: fixed;
  bottom: 10px;
  left: 10px;
  display: none;
}

JavaScript

var btnTop = $("#back-to-top");

$(window).scroll(function() {
  if ($(window).scrollTop() > 100) {
    btnTop.fadeIn(500);
  } else {
    btnTop.fadeOut(500);
  }
});

btnTop.on("click", function() {
  $("html,body").animate({ scrollTop: 0 });
});