Skip to content

Instantly share code, notes, and snippets.

@SamSamskies

SamSamskies/scrolling-sample.js

Created September 1, 2014 07:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SamSamskies/ac1fc767a424c5ea0fbc to your computer and use it in GitHub Desktop.
Save SamSamskies/ac1fc767a424c5ea0fbc to your computer and use it in GitHub Desktop.
Download ZIP
scrolling sample
Raw
scrolling-sample.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
margin-top: 50px;
}
#next {
position: fixed;
top: 0;
background: white;
}
</style>
</head>
<body>
<a id="next" href="#">next</a>
<div>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque totam facere libero nemo atque quas, ratione praesentium maiores sint corporis tempore dolorem nihil, ipsam magnam quibusdam eius iste nobis nostrum!</div>
<div>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, consectetur, quisquam! Suscipit esse, in. Facere expedita, eius, delectus beatae consequuntur, itaque repudiandae quasi obcaecati eligendi illo laborum ipsam nisi neque?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat tenetur natus ipsa consequuntur debitis harum autem quibusdam maiores est incidunt temporibus tempore obcaecati, porro expedita atque, assumenda deserunt commodi. Placeat!</div>
<div>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum voluptatem debitis natus temporibus asperiores, sapiente fuga, animi laboriosam excepturi reiciendis, sequi illum vitae maxime totam quis mollitia minima quas. Necessitatibus?</div>
<div>4. lkasjdlkfj</div>
<div>5. aksndlkfjaklsjdflkjaslkdjflkasjdlkfjaslkdj kajslkdfjlkasjdlkf</div>
<div>6. a</div>
<div>7. blah blah</div>
<div>8. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores reiciendis id error placeat libero quo maxime nobis aliquid dolor magnam, quasi atque commodi, eos pariatur suscipit labore. Nobis suscipit, aliquid?</div>
<div>9. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, laboriosam! Aliquid, assumenda porro explicabo voluptates distinctio accusantium delectus sed nulla atque iste, unde officiis! Eius rem, facilis repellat eum ad.</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, suscipit corrupti. Temporibus autem placeat quibusdam laboriosam quo incidunt, modi sint nobis facere blanditiis tempora perspiciatis, assumenda rem reiciendis vel voluptates!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi beatae dignissimos neque dolorum sed ducimus. Autem soluta sit amet voluptatem. Consequatur officia totam eum, sint autem est corporis fuga nobis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi ipsum, explicabo ab possimus magnam reprehenderit eaque itaque et minima eligendi quod impedit adipisci. Molestias quisquam mollitia fugiat quibusdam, quo ipsam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quae dolores accusamus vel amet laboriosam eveniet! Quam amet atque quia velit, delectus magnam eum ratione quaerat modi officiis, cum illum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae quod nam ipsam laborum, rem, itaque officia beatae sint, quam quaerat distinctio ex nobis ipsa quos veritatis laudantium maiores! Rem, voluptas.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, error praesentium cumque, culpa animi inventore libero nam accusamus nostrum laudantium commodi totam iure nulla quia similique? Minima quaerat, nesciunt dolor.
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script>
var $divNodes = $('div');
var yCoords = [];
$.each($divNodes, function(i, divNode) {
yCoords.push(divNode.getBoundingClientRect().top);
});
$('#next').on('click', scrollToElement);
function scrollToElement(e) {
e.preventDefault();
var yPos = $('body').scrollTop();
for(var i=0; i < yCoords.length; i++) {
if (yCoords[i] > yPos) {
debugger
$(document).scrollTop(yCoords[i]);
break;
}
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment