Scroll To Top

by Venkatesh Dematti

HTML

<div class="content">
  <h1>Scroll to top</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus officiis, voluptatibus porro harum repellendus, nobis voluptatum a odit tenetur quae necessitatibus voluptas possimus quia dignissimos eius, perspiciatis odio? Reprehenderit qui similique hic quisquam fuga numquam modi veritatis. Cumque dolorum veritatis, praesentium odit minus reiciendis rem iusto, iure quidem adipisci tempore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia necessitatibus, labore aut inventore ab nobis reiciendis omnis ducimus eius tempora laudantium fugiat sit! Temporibus facere minima magnam cum, commodi atque, sapiente suscipit minus quas, aut provident voluptate, mollitia aliquid. Perferendis, maiores adipisci quo ut animi, esse itaque sed beatae necessitatibus.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus rerum sequi dolore assumenda quaerat deleniti perferendis quo id corporis omnis vitae, quisquam minima culpa ut ea, saepe maxime eveniet maiores at perspiciatis impedit, esse fugit. Unde deleniti ex facere quis quas, provident ab eos, porro saepe. Quas iusto sapiente, rerum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores neque et ad, quaerat voluptatem minus quam at quod aliquam, odit vel, ea pariatur. Soluta repellendus distinctio, quae saepe, eius facere voluptate sed assumenda dolores atque alias, maiores sequi rerum magnam officia! Voluptates sunt libero, aut inventore aspernatur. Omnis, dicta, debitis.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere tenetur quis doloribus tempora eligendi tempore temporibus perferendis, repellat illum eaque quaerat autem at ab aliquam quia quisquam reiciendis! Veritatis enim corrupti molestias porro necessitatibus, aliquam aliquid, veniam cupiditate blanditiis totam nobis dolorem vitae unde reiciendis incidunt sunt et eius quas?</p>
  <p>Lorem ipsum dolor sit amet,...

CSS

.content {
  max-width: 600px;
  margin: auto;
  
  h1 {
    text-align: center;
    font-size: 72px;
    font-family: 'Satisfy', cursive;
  }
  
  p {
    font-size: 18px;
    font-family: 'Marcellus', serif;
    color: #666;
    text-align: center;
  }

.scroll-to-top {
	width: 50px;
	height: 50px;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	position: fixed;
	bottom: 150px;
	right: 20px;
	display: none;
	z-index: 2000;
	background-color: $stuntcoders-blue;
	transition: transform 0.3s;
	overflow: hidden;

	&:before,
	&:after {
		content: '';
		position: absolute;
		display: block;
		top: 15px;
		background-color: #fff;
		height: 20px;
		width: 5px;
	}

:before {
		transform: rotate(-45deg);
		left: 28px;
	    box-shadow: -8px 14px 0px 8px darken($stuntcoders-blue, 8%);
	}

:after {
		transform: rotate(45deg);
		right: 28px;
	}

:focus {
		outline: none;
	}
}

JavaScript

$(window).scroll(function() {
  if ($(this).scrollTop() > 100) {
		$('.scroll-to-top').fadeIn();
	} else {
	  $('.scroll-to-top').fadeOut();
	}
});

$('.scroll-to-top').on('click', function(e) {
  e.preventDefault();
	$('html, body').animate({scrollTop : 0}, 800);
});