Skip to content

Instantly share code, notes, and snippets.

@NatalieMac

NatalieMac/index.html

Created April 5, 2014 16:50
Show Gist options
  • Save NatalieMac/9994478 to your computer and use it in GitHub Desktop.
Save NatalieMac/9994478 to your computer and use it in GitHub Desktop.
Download ZIP
Scroll to Top jQuery Plugin
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scrolly jQuery Plugin</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<h1>This is a lot of text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, eaque rem suscipit corporis sapiente expedita maiores veritatis consequatur odit magni eius est doloremque voluptatibus labore saepe explicabo veniam at velit!</p>
<p>Amet, cum, ad deserunt qui modi enim consectetur repudiandae nisi animi. Rerum, adipisci, illum, eos, est eaque dolores molestiae voluptatem distinctio eius doloremque facere corrupti nesciunt repudiandae? Consequuntur, repellendus, laboriosam.</p>
<p>Officia, facilis, omnis quidem dolore laboriosam ex enim. Eveniet, debitis, incidunt, numquam maxime recusandae soluta error autem expedita optio nam quaerat veritatis modi corporis eaque doloremque voluptates voluptate cumque harum.</p>
<p>Omnis, officia dicta eius asperiores numquam nemo consequatur itaque aliquid porro ullam eum excepturi aperiam nostrum quod beatae facilis eveniet totam vero eligendi quas veritatis labore pariatur dolore cumque accusantium!</p>
<p>A, similique, dignissimos, consectetur ad reiciendis aperiam sed perferendis tenetur vitae itaque voluptas animi iusto. Pariatur, optio, provident, qui accusantium itaque tenetur est laborum molestiae ipsum ratione laboriosam consequuntur odio.</p>
<p>Nihil dolor tempora dolore incidunt beatae facilis animi omnis. Praesentium, atque perferendis vitae consequuntur consectetur numquam ratione! Dolorum, maxime voluptatem dignissimos error veniam modi assumenda rem earum libero quia ut.</p>
<p>Esse, eveniet, quae, nemo, at ad accusantium iure dicta natus est officia iste ipsa architecto veniam possimus velit. Mollitia, inventore quidem iure minus magnam suscipit asperiores libero quia repellendus consequuntur.</p>
<p>Tenetur, tempora, vitae, doloremque, ab ut eius cupiditate temporibus quidem nulla deserunt blanditiis sed nesciunt quis aperiam iure asperiores similique consequatur accusamus neque nobis eos recusandae maxime sit cum quasi.</p>
<p>Maiores, laudantium, perspiciatis officia aliquid exercitationem tempore esse placeat facilis repudiandae illum rerum suscipit sapiente? Magnam, illo, reiciendis, ratione cupiditate nesciunt repudiandae excepturi error consectetur doloribus itaque quis dolor deserunt!</p>
<p>Ab, sed, sunt, labore, quia nesciunt maiores quae accusamus debitis tempore at rerum animi quaerat quam rem eaque illo aspernatur dolores eos sint architecto exercitationem ex soluta velit dolorum pariatur.</p>
<p>Repellat dicta eveniet tenetur libero expedita voluptatum voluptatibus consequatur sit vero commodi. Id, nemo facilis velit reiciendis quasi unde voluptatem cum. Repellat, accusamus vero porro rem iusto eaque labore quod!</p>
<p>Perferendis odit numquam explicabo. Explicabo, adipisci, odit, autem iste hic earum magni consequuntur at dolore repellat distinctio voluptatum maxime in repudiandae mollitia amet quis. Ipsa, fugit at assumenda voluptate neque.</p>
<p>Nihil, libero nam placeat voluptatem quam iste quo sed veritatis temporibus impedit at harum soluta rerum dolorem sint. Est aspernatur maxime omnis modi voluptatibus dignissimos ex a deleniti dolorem itaque.</p>
<p>Tenetur, nihil, distinctio, dignissimos expedita rem minus ipsam impedit et officia quibusdam alias ea mollitia quaerat molestiae animi dolores nostrum. Quod, dolorum, a fuga laboriosam harum molestiae ut libero voluptate.</p>
<p>Repellendus, deserunt, incidunt deleniti placeat sed eligendi laudantium earum. Doloribus, voluptate, unde, inventore, molestias necessitatibus sequi facilis soluta laboriosam neque tenetur obcaecati mollitia laudantium minima dicta in odio totam praesentium.</p>
<p>Explicabo eligendi numquam hic sint earum? Tempore, vel, necessitatibus, enim odit quo aperiam eos velit perspiciatis autem deserunt officia aliquid porro suscipit eaque libero. Sint, earum cumque enim. Officia, dignissimos?</p>
<p>Eligendi, autem, vel, debitis, nulla cupiditate iusto sint quas officia optio odit est tempore deleniti recusandae nam nesciunt distinctio impedit incidunt error iste unde similique ab dolorum! Porro, in impedit!</p>
<p>Consectetur, facilis dolore dolor omnis doloribus dignissimos voluptatem quasi ipsam possimus odio culpa illum vero perferendis similique earum iste consequuntur laborum nobis hic cupiditate nihil quod eum optio vel eveniet!</p>
<p>Sed, nihil, maxime, pariatur ipsam voluptate repellendus impedit placeat provident repellat saepe quaerat commodi. Aut, soluta dolorum numquam magni esse deleniti officiis ipsam accusantium officia cumque quidem aspernatur reiciendis at.</p>
<p>Officia, numquam, ipsum, corporis earum est at voluptas a quasi nemo quisquam similique voluptatibus natus aut optio repudiandae nihil eligendi laudantium consequuntur nobis illo sed possimus minus praesentium provident eaque!</p>
<p>Accusamus, vero repudiandae illo suscipit ullam et odio quos maxime iusto magni optio ipsum fugiat eligendi amet dolorum reprehenderit molestias expedita veniam perferendis aliquam? Inventore iure possimus sequi aperiam suscipit.</p>
<p>Obcaecati, at, libero, dolorum odit ut voluptas distinctio id ea vero saepe facere exercitationem optio ad veniam provident quae repellat aspernatur! Perferendis eveniet harum vel a molestias nostrum doloremque animi.</p>
<p>Nesciunt, repellendus, quisquam deserunt dolor repudiandae culpa saepe corporis quis cumque eligendi voluptates tempora sunt reprehenderit neque enim excepturi quam itaque ducimus praesentium doloribus non! Expedita, placeat soluta nisi molestias.</p>
<p>Quisquam, nulla sunt suscipit explicabo ex quis beatae? Totam, quidem iste soluta possimus molestias. Magni quos similique atque ex debitis reprehenderit eligendi iure. Aliquam, minima soluta laborum culpa deserunt corporis.</p>
<p>Omnis, eaque, odit, voluptatum corrupti earum recusandae alias delectus facilis vitae illo quasi dignissimos nihil voluptatibus iure tempore veritatis modi doloremque explicabo dolor aperiam. Cumque, consectetur quam porro harum fuga?</p>
<p>Ipsum, consequuntur, id, reiciendis, accusamus sapiente inventore odit nam earum veniam sed rem temporibus minus. Nulla, quaerat, itaque, dolorem optio hic ipsam amet aliquam consequatur ea rerum rem sit nostrum.</p>
<p>Porro, excepturi, vel deserunt non quam laudantium neque veritatis maiores recusandae earum commodi molestias dolore quod! Beatae explicabo ea ut voluptate nobis libero dolores. Iusto, quo itaque neque eveniet et.</p>
<p>Magni, consectetur, esse, repellendus ratione earum vel suscipit obcaecati placeat asperiores vero neque ipsum harum labore rerum beatae maiores illum repellat et tempora tempore velit inventore atque cumque odit at.</p>
<p>Nesciunt, esse, in, impedit perspiciatis quaerat minima nam explicabo rerum fugit quas distinctio rem omnis nulla asperiores qui. Tempora, dignissimos nemo magnam. Molestiae, soluta tempora eum provident. Inventore, libero blanditiis?</p>
<p>Et, beatae, aut, asperiores architecto voluptatibus accusamus rem illo harum quam pariatur dolorum ipsa error in saepe fugiat aspernatur id fuga non nisi quas vero omnis molestiae! Tenetur, nulla accusamus.</p>
<p><a href="#" class="scrolly">Back to top</a></p>
<p><a href="#" class="scrolly left">Back to top</a></p>
<script src="scripts/jquery-2.1.0.min.js"></script>
<script src="scripts/jquery.scrolly.js"></script>
<script>
$.fn.scrolly.defaults.scrollTop = 100;
$('.scrolly').scrolly({
scrollDuration: 1000
});
</script>
</body>
</html>
Raw
jquery.scrolly.js
(function($, window, document, undefined){
$.fn.scrolly = function(options){
var opts = $.extend( {}, $.fn.scrolly.defaults, options);
return this.each(function(){
var link = $(this),
win = $(window);
link.on('click', function(e){
$("html, body").animate({scrollTop: 0}, opts.scrollDuration);
e.preventDefault();
});
link.hide();
win.scroll(function(){
if (win.scrollTop() > opts.scrollTop) {
link.fadeIn();
}else{
link.hide();
};
});
});
};
$.fn.scrolly.defaults = {
scrollDuration: 2000,
scrollTop: 400
}
}(jQuery, window, document));
Raw
style.css
body {
background: #7cc0cb;
font-family: Geneva, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
margin: 1em auto;
max-width: 45em;
}
h1, h2, h3, h4, h5, h6 {
font-family: Geneva, Verdana, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
/* Scrolling */
.scrolly {
background: rgba(0,0,0,0.5);
bottom: 0;
color: white;
padding: 0.5em 1em;
position: fixed;
right: 0;
text-decoration: none;
-webkit-transition: background 300ms;
-moz-transition: background 300ms;
-ms-transition: background 300ms;
-o-transition: background 300ms;
transition: background 300ms;
}
.scrolly:hover {
background: rgba(0,0,0,0.9);
}
.scrolly.left {
left: 0;
right: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment