jQuery scrollView V0.8 : viewport scroll and screen vertical helper

In this example below you will see how to do a jQuery scrollView V0.8 : viewport scroll and screen vertical helper with some HTML / CSS and Javascript

$.scrollToMe(); $.scrollScreen(); + Find scrollElement + getHash() || setHash()

Thumbnail
This awesome code was written by molokoloco, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright molokoloco ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>jQuery scrollView V0.8 : viewport scroll and screen vertical helper</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <p>Scroll view demo ! <span style="color:red;font-weight:bold">You do the wheeele</span></p>

<div>
	<p>Morbi consectetur vestibulum leo, eget placerat mauris rutrum vel. Donec sed lectus id dui fermentum tristique sed a nibh. Aliquam erat volutpat. Etiam gravida molestie mollis. Nulla condimentum dui porttitor odio dignissim nec adipiscing sem ultricies. Proin vitae massa eu sem rhoncus faucibus nec placerat lorem. Praesent vitae nunc dolor, vitae bibendum velit. Fusce ultricies lobortis viverra. Vestibulum consequat tempor mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt arcu a lorem gravida vulputate. Suspendisse tortor ipsum, ultricies nec adipiscing vel, feugiat sed quam. Praesent fermentum tellus et eros ullamcorper vel condimentum risus dictum. Phasellus dapibus tempus arcu in facilisis. Donec accumsan ultrices sapien et molestie.</p>
	<p>Quisque aliquet lacus sit amet turpis vulputate scelerisque. Maecenas pellentesque, ligula non cursus iaculis, est tellus rhoncus eros, nec aliquam augue odio eget orci. Sed suscipit ligula vel risus elementum facilisis. Quisque malesuada tincidunt nunc. Pellentesque condimentum, lacus facilisis auctor pulvinar, nisi lectus euismod lacus, vulputate sagittis mi massa quis dolor. Integer lorem nisl, lobortis nec aliquet id, sollicitudin eu libero. Proin cursus libero sit amet diam convallis congue. Suspendisse nunc massa, bibendum at bibendum elementum, hendrerit eget augue. Maecenas interdum mauris sed quam gravida quis consectetur tellus dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris non eros libero. Curabitur quam diam, lacinia quis pharetra ut, elementum in turpis. Pellentesque et urna eu mi convallis pulvinar.</p>

    <h4>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h4>
<h5>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h5>
	<p>Proin rhoncus nisi eu urna condimentum congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ullamcorper suscipit risus, sit amet dapibus est interdum at. Fusce sollicitudin dictum lacus, quis luctus nunc tempor ut. Integer aliquam erat in purus consectetur ac commodo enim volutpat. Cras blandit consequat consequat. Sed suscipit adipiscing purus, in cursus nisl iaculis non. Nulla facilisi. Duis consectetur metus nec ipsum fermentum in volutpat nunc scelerisque. Ut rutrum bibendum sem ac rhoncus. Vestibulum quis massa arcu, sed tristique mauris. Proin id adipiscing libero. Donec sed dui libero, quis viverra nunc. Nulla nec ipsum felis, at hendrerit purus. Aliquam bibendum justo sit amet diam suscipit interdum.</p>
	<p>Nunc suscipit purus vitae orci ornare imperdiet. Etiam fringilla, diam non feugiat tempus, ante diam convallis dui, id lacinia mauris lorem sed velit. Quisque non justo augue. Phasellus justo urna, elementum eget pretium vel, elementum in odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed et nunc non nisl faucibus malesuada. Aenean diam velit, luctus eget pretium et, hendrerit at dui. Fusce non nibh viverra risus lacinia dictum. Nullam dictum tincidunt commodo. Sed sapien libero, posuere et bibendum in, tincidunt ac leo. Aenean porta tristique libero, quis lacinia metus feugiat sed. Ut imperdiet, ante non tristique fringilla, nisi dui viverra mi, id fringilla orci mauris congue nibh.</p>
	<p>Nunc justo ipsum, blandit nec pretium ut, suscipit eget tellus. Sed at lacus augue. Vestibulum sem lectus, semper a ultrices in, suscipit ac ipsum. Proin lacinia felis a augue varius ut tempor erat aliquam. Praesent sit amet nunc erat, sit amet blandit ante. Maecenas ullamcorper velit eu ipsum pulvinar egestas. Nullam sit amet est tellus, ut condimentum nulla. Curabitur vel ligula diam, eget ultricies mauris. Sed non velit mauris, eget mattis erat.</p>
	<p>Mauris sed condimentum nisi. Aliquam interdum adipiscing metus, condimentum egestas risus iaculis sit amet. In eu auctor leo. Curabitur dictum sem eget dui laoreet ac elementum ante luctus. Aliquam semper magna non leo rutrum eget malesuada eros porttitor. Praesent rhoncus dictum lacinia. Donec euismod odio in neque ultricies facilisis. Etiam purus dolor, pellentesque quis laoreet luctus, ullamcorper eget leo.</p>
	<p>Quisque accumsan, orci eu faucibus sollicitudin, massa ligula rhoncus erat, fermentum dictum dolor nisi blandit justo. Maecenas a lectus odio. Nulla facilisi. Vivamus commodo sapien vel turpis tempor cursus. Donec id justo mi. Phasellus eros justo, tempus et tempor rutrum, iaculis vitae sapien. Integer id purus lacus. Integer quis tellus neque, nec posuere nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean quis dolor a justo adipiscing sodales. In hac habitasse platea dictumst. Aliquam congue, sem non porta faucibus, velit lectus faucibus sapien, a auctor tellus diam id massa. Praesent volutpat nulla id eros scelerisque iaculis.</p>
	<p>Aliquam lorem metus, placerat ac consectetur eu, aliquet quis ipsum. Aliquam sollicitudin dapibus leo at tincidunt. Nam pulvinar euismod velit ut volutpat. Proin quis dolor et magna rutrum bibendum. Fusce accumsan scelerisque sapien ut volutpat. Sed sodales neque sed neque ornare aliquet. Sed eu enim ligula. Nulla in ligula ante.</p>
	<p>Vivamus tristique, velit non gravida ornare, leo erat pulvinar tellus, a aliquam eros turpis id eros. Duis fermentum mollis dolor eu dapibus. Quisque vestibulum, enim vitae vulputate elementum, nibh erat accumsan nunc, euismod ultrices diam odio id ipsum. Sed faucibus lacinia sapien, non tempor dolor tincidunt vel. Pellentesque sem nunc, volutpat ultricies ultrices vel, condimentum id metus. Nulla facilisi. Cras ante lorem, fringilla eu blandit ut, tristique vel turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	<p>Phasellus dapibus ante malesuada leo molestie ultricies. Vivamus id lorem urna, at dapibus leo. Vivamus in nisi id enim rhoncus fermentum. Duis dapibus lacus eu neque mollis elementum. Quisque ut dictum magna. Integer porttitor mollis ullamcorper. Nam nec nunc et dolor interdum blandit at sit amet orci. Etiam sollicitudin lacinia libero non imperdiet. In non condimentum nisi. Integer feugiat venenatis scelerisque. Etiam eget tortor vel velit pulvinar varius.</p>
	<p>Curabitur id arcu et sapien faucibus ultrices. Aenean at enim tempor erat hendrerit venenatis quis nec lectus. Maecenas vehicula sodales sapien nec venenatis. Etiam eget suscipit mauris. Praesent condimentum ullamcorper lacus, volutpat convallis mauris tempor eu. Integer massa felis, consectetur in placerat sed, tincidunt nec nunc. Sed dolor sapien, porta in dictum in, mollis scelerisque justo. Nam eget ligula velit. Donec cursus rhoncus tortor, a scelerisque nunc pretium non. Donec ut ullamcorper sapien. Ut dictum nisi eu sem commodo eu ullamcorper leo tempus. Donec urna quam, tempus vel pretium eget, tincidunt nec tellus. Nam tempus, eros in lobortis ultrices, tellus ante eleifend libero, pharetra dignissim neque urna congue lectus. Morbi at libero vitae tellus venenatis euismod vel et lorem. Suspendisse aliquam gravida felis ut dictum. Pellentesque id urna eu libero suscipit fermentum elementum id justo.</p>
	<p>Integer hendrerit dui ut felis fringilla eget malesuada erat porta. Pellentesque luctus fringilla vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis tristique augue. Praesent ultrices convallis erat, sit amet aliquet sem tempor quis. Praesent est metus, accumsan nec tempus et, mollis vel purus. Sed non orci ante, vel malesuada metus.</p>
	<p>Vivamus leo leo, dignissim eget accumsan at, luctus eget ante. Ut feugiat egestas urna quis fermentum. In erat neque, suscipit et pulvinar at, facilisis sit amet velit. Aenean aliquam dolor eget ipsum malesuada tincidunt. Etiam a dui quis felis vehicula tempus id vel dolor. Proin faucibus, ante et lacinia luctus, sapien enim dictum sapien, sit amet porta felis purus in est. Curabitur augue nulla, tincidunt et venenatis vitae, adipiscing quis lectus. Nulla gravida velit vitae felis imperdiet ut dignissim felis consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam id ipsum ac tortor iaculis rhoncus et id nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla quam lacus, sagittis ut vestibulum ut, volutpat vitae erat. Aliquam diam nulla, scelerisque nec convallis ac, vestibulum at arcu. Suspendisse lorem orci, ullamcorper nec euismod vitae, consectetur vitae libero. Proin at arcu a est cursus pellentesque sed quis enim. Suspendisse fringilla vulputate ornare.</p>
	<p>Duis tincidunt ultricies enim ac rutrum. In id odio justo. Fusce suscipit ante eget justo semper blandit. Aenean vestibulum porta metus, eget lacinia elit molestie id. Nulla eu quam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam ornare suscipit elit nec semper. Proin a lorem velit. Curabitur a urna sed neque luctus eleifend. Phasellus vestibulum enim in nunc fermentum quis pulvinar purus gravida. Maecenas tincidunt commodo ipsum vitae lacinia. Donec tincidunt, lectus nec imperdiet consequat, quam magna luctus tortor, non lobortis nisi velit ac erat. In ac nibh orci. Etiam accumsan blandit elit, vitae mattis nunc elementum vitae. Maecenas blandit imperdiet porta.</p>
	<p>Curabitur vitae neque dolor, laoreet ultricies eros. Morbi at augue orci. Nullam quis dolor ut nunc adipiscing elementum in quis ligula. Nulla in turpis sit amet sapien tincidunt pellentesque ut et elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec sagittis condimentum mi, vel laoreet ligula placerat at. Suspendisse ullamcorper, ligula ultrices tincidunt semper, nunc mi sollicitudin ipsum, vel vulputate leo quam ut dolor. Suspendisse non laoreet urna. Phasellus imperdiet velit a nunc iaculis laoreet. Vivamus imperdiet, nibh at porttitor viverra, metus felis imperdiet nulla, quis aliquet elit leo ut lacus. Etiam pharetra malesuada neque, ut consectetur neque gravida tristique. Fusce lectus sapien, dapibus quis gravida eu, tempor ac lorem. Proin lorem dui, accumsan ut elementum sed, egestas sed felis. Vivamus id justo ante, vitae semper enim. Cras sit amet auctor risus. Nunc quis rutrum ligula.</p>
	<p>Nullam dignissim faucibus cursus. Sed sed ornare turpis. Proin odio augue, egestas in tempus vitae, malesuada ac urna. Vivamus at est massa, ac blandit lacus. Praesent justo quam, consequat ac fermentum ut, molestie nec tellus. In malesuada lectus in magna hendrerit sodales. Nunc accumsan, quam sed aliquam vulputate, arcu libero pellentesque quam, eget pellentesque augue nunc vitae augue. Fusce non ipsum et felis scelerisque dignissim et in diam. Maecenas urna dui, egestas et congue et, venenatis non arcu. Integer sed enim magna. Proin vel augue nisi. Nulla varius sodales egestas. Cras iaculis risus eget nibh blandit pharetra.</p>
	<p>Donec justo nulla, gravida eget vehicula et, faucibus eu justo. Nam hendrerit venenatis dolor, sed auctor neque rutrum vitae. Cras tristique imperdiet odio, non commodo neque dictum et. Donec a laoreet risus. Cras pulvinar ullamcorper commodo. Ut eget justo sit amet dui venenatis dapibus sit amet non erat. Donec fermentum pulvinar erat, adipiscing posuere eros feugiat vitae. Suspendisse congue hendrerit libero, ut tempor velit aliquet ac. Praesent ac turpis leo. Aliquam pharetra condimentum odio et convallis. Quisque orci augue, aliquet non varius quis, malesuada id nunc. Cras enim quam, volutpat vel scelerisque blandit, tempus fringilla orci. Nulla facilisi. Donec adipiscing, tellus eu pharetra molestie, massa lectus posuere neque, sed tincidunt nunc tellus et tortor.</p>
	<p>Vivamus nunc libero, rutrum in interdum vitae, ultricies non purus. In non arcu sit amet lacus consectetur dictum. Sed blandit malesuada mattis. Nullam nunc nisl, pretium ut pellentesque quis, vestibulum a purus. Nam varius eros eu nunc commodo facilisis ac quis dolor. Cras mollis ante a eros tincidunt eu malesuada nibh cursus. Sed ullamcorper quam quis tortor feugiat sollicitudin. Curabitur blandit libero nec leo venenatis vitae vulputate nunc blandit. Nullam ipsum tortor, fringilla at aliquam in, iaculis at arcu.</p>
	<p>Fusce id felis nisl, et lobortis nunc. Quisque pretium fermentum enim, at egestas sem fermentum ut. Aenean lectus ante, ornare cursus bibendum vel, tempus ut orci. Proin et metus velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium augue id lectus vehicula aliquet. Cras sed orci eros.</p>
	<p>Duis viverra varius tristique. Nulla eu erat blandit augue aliquam feugiat. Integer tortor ante, rutrum quis vestibulum quis, interdum ac ante. In id odio nibh. Aenean quis velit a massa pharetra sagittis id vitae mauris. Cras sed justo enim, non iaculis purus. Sed porttitor sagittis ultricies. Maecenas quis est nec eros gravida malesuada. Morbi rhoncus dignissim metus nec porta. Quisque mollis scelerisque ipsum, nec faucibus lectus fringilla et. Vivamus sodales, leo et ullamcorper tempor, metus dui accumsan leo, eu commodo diam dui eget magna. Duis commodo ultricies libero ut sodales.</p>
	<p>Fusce volutpat lacus sed mi aliquet blandit. Nullam ut lacus imperdiet tortor sodales mollis. Morbi aliquam sagittis ante, at dictum orci iaculis pulvinar. Cras ante ligula, mollis quis tempor id, porttitor sed metus. Nullam enim odio, feugiat sit amet ullamcorper ut, tincidunt in lectus. Curabitur sollicitudin augue eu nunc commodo sit amet facilisis orci vulputate. Donec semper quam sed sapien rutrum facilisis. Fusce hendrerit mollis arcu posuere commodo. Donec lacus orci, auctor et pulvinar nec, pretium ac diam. Ut ac ante sapien. Donec eleifend massa ut est adipiscing rhoncus. Sed sollicitudin nisl eu justo pretium vel tempus magna gravida.</p>
	<p>Fusce consequat nisl sed mauris tincidunt tempus. Nullam eget dignissim urna. Curabitur rutrum sodales justo, et vestibulum diam faucibus quis. Mauris a mi vitae nunc rutrum bibendum. Phasellus sed arcu suscipit purus aliquam placerat. Donec sodales, purus consectetur feugiat tristique, leo risus ultrices arcu, ac iaculis enim erat id diam. Mauris egestas, urna facilisis porta bibendum, dolor quam accumsan orci, at sodales ligula quam nec magna. Proin facilisis nisi quis purus accumsan mattis eget vitae ligula. Quisque est enim, placerat eget convallis et, dignissim et nunc. Aenean posuere ipsum vitae ligula eleifend sollicitudin. Ut dapibus nulla non nulla dictum interdum. Ut pretium diam vel metus pretium pretium. Fusce dapibus, lorem at gravida congue, sapien eros malesuada diam, eget rutrum elit nunc eget sapien. Etiam feugiat imperdiet magna nec condimentum. Etiam sagittis tempor adipiscing.</p>
	<p>Sed elit diam, imperdiet eu bibendum in, aliquam eget sem. Praesent sit amet est in nunc ultrices interdum. Nullam ut nisi nec nisl elementum dictum. Cras adipiscing volutpat leo, nec facilisis lectus egestas venenatis. Cras interdum diam vel neque tempus convallis. Nullam vulputate nisi a lacus mattis auctor. Pellentesque rhoncus diam vitae tellus accumsan elementum. Praesent vehicula, libero quis hendrerit luctus, dui risus laoreet nibh, vitae cursus velit elit tempus sem. Nulla nec ipsum leo. Nunc purus nisl, placerat in dignissim vel, fringilla et odio. Maecenas eu tellus nec est ultrices commodo ut in tellus. Curabitur vitae erat lectus. In hac habitasse platea dictumst.</p>
	<p>Mauris rhoncus sagittis nibh id commodo. Suspendisse sed purus vitae lorem lobortis feugiat nec vehicula sem. Donec consequat, eros et ornare feugiat, turpis massa vehicula velit, ut porta arcu leo quis sapien. Nulla facilisi. Phasellus sed lectus diam. Fusce est augue, porttitor ac semper a, consequat eget purus. Suspendisse ut tellus molestie ligula venenatis dapibus. Quisque vestibulum dolor vitae est porttitor quis rhoncus mauris cursus. Curabitur cursus, mi vel convallis feugiat, risus purus condimentum eros, at dictum erat tortor ac ante. Suspendisse vel est dolor.</p>
	<p>Nam consectetur urna eget orci feugiat dignissim. Ut malesuada nibh et nisi scelerisque ut porta lectus commodo. Mauris tempor vehicula mi, sed porta tellus elementum non. Nunc vestibulum odio vitae nisi tempus iaculis. Quisque dictum, risus et porttitor egestas, tellus diam varius quam, eget fringilla risus ipsum viverra nibh. Phasellus adipiscing sapien quis orci pretium iaculis. Aliquam mi nibh, ullamcorper sit amet tempus sit amet, aliquam non urna. Donec euismod sollicitudin leo, egestas gravida quam sollicitudin sed. Vestibulum sit amet libero nibh, non sagittis est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin volutpat malesuada scelerisque. Duis porttitor felis ornare velit placerat tempor. Mauris placerat volutpat molestie.</p>
	<p>Suspendisse vel enim odio. Quisque sapien mi, rutrum non sagittis vitae, mollis in libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris sagittis laoreet pharetra. Suspendisse at rhoncus magna. Suspendisse sapien eros, imperdiet ac feugiat ac, convallis ut ante. Nullam orci ligula, rutrum nec adipiscing in, cursus id diam. Ut accumsan, leo non vulputate ultricies, lorem leo semper nulla, pulvinar dapibus lorem lacus id magna.</p>
	<p>Nunc diam nibh, congue vitae tempus ac, elementum eu elit. Pellentesque at dui sit amet velit fermentum tristique nec ac mi. Vestibulum sit amet suscipit felis. Quisque orci nulla, imperdiet ac venenatis ac, viverra in sapien. Integer nisl mauris, sagittis quis euismod et, scelerisque dapibus nisi. Maecenas quis lacus odio, non mollis purus. Nunc quam tortor, sagittis eu lobortis consequat, egestas consequat mi. Vivamus fermentum egestas libero, sit amet bibendum ligula lacinia eu. Etiam imperdiet, velit in venenatis venenatis, libero magna malesuada massa, vel gravida velit massa sed ligula. In sodales condimentum urna, id luctus purus fermentum sed. Suspendisse in velit mauris.</p>
	<p>Aliquam eget mauris erat, ut feugiat odio. Curabitur eget leo eget nisl eleifend tristique vehicula sed ligula. Duis viverra est eu leo cursus sed porttitor lorem laoreet. In id augue sollicitudin eros imperdiet facilisis non vel odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat tristique ligula, consectetur gravida lorem tempus adipiscing. Ut eu risus nec neque ultrices lacinia vitae ac mauris. Nunc in ante urna, eget elementum enim. Pellentesque varius felis quis massa sollicitudin interdum. Pellentesque eros arcu, porta id tristique non, ultrices sed velit. Duis dictum tristique erat, id viverra libero tristique vel. Nullam elementum, nibh nec gravida laoreet, nulla ipsum facilisis lectus, non auctor orci metus eget ante. Etiam malesuada hendrerit lacus non sollicitudin.</p>
	<p>Nulla magna diam, pellentesque in suscipit sed, sagittis nec mauris. Proin pulvinar mollis turpis ac sollicitudin. Morbi at arcu at nisl sagittis rhoncus eget ultricies massa. Praesent ultrices sapien eu dui ultrices rhoncus. Vestibulum lacinia urna vel sem feugiat rutrum. Morbi sit amet pulvinar libero. Vivamus turpis lacus, pharetra eu ultrices commodo, posuere nec neque. Sed non aliquet dui. Nullam tincidunt lectus a orci congue id ultrices dui aliquet. Donec id luctus lacus. Donec eget rutrum libero. Phasellus dignissim tristique ligula eget venenatis.</p>
	<p>Morbi dignissim velit sit amet leo malesuada at rhoncus ante tincidunt. Aliquam in velit sem. Donec a turpis non leo laoreet suscipit. Proin at porttitor mi. Proin magna dolor, pharetra at dignissim vitae, luctus vitae ipsum. Curabitur iaculis, massa eget sodales congue, mauris velit varius lorem, vitae tristique erat enim vitae nunc. Phasellus commodo, tortor a blandit faucibus, eros dui elementum turpis, ut scelerisque magna nisi sit amet magna. Pellentesque suscipit lacus aliquet sem venenatis porta. Sed cursus leo ut mi tristique luctus. Aenean quis justo non leo feugiat mattis non ac justo. Maecenas et sem non ligula viverra tempor quis sed risus. Ut lacinia nibh ut metus aliquet tincidunt. Quisque mattis egestas est id eleifend. Praesent dictum nunc et magna rutrum sollicitudin. Suspendisse non blandit turpis. Sed ac leo nulla, vel suscipit velit.</p>
	<p>Suspendisse scelerisque tincidunt odio eget blandit. Nam id velit in eros sagittis iaculis vel nec urna. Quisque hendrerit, ligula sit amet ultrices mollis, orci purus dapibus neque, ut iaculis justo tortor eu justo. Vestibulum vehicula urna sit amet odio vehicula porttitor. Nulla nisi metus, pharetra eu fermentum ac, sollicitudin sed dolor. Maecenas at urna neque, ut tincidunt purus. Donec rhoncus sollicitudin tellus, sed consectetur lectus cursus eget.</p>
	<p>Cras mi dui, molestie sit amet bibendum id, posuere a nulla. Maecenas ultricies dui ac nulla egestas rhoncus. Suspendisse nec leo nibh, eu dapibus tellus. Cras ut augue tortor, sit amet scelerisque sem. Aenean sed justo non mi molestie pharetra nec et leo. Curabitur aliquam varius orci. Aliquam eget diam urna. Vestibulum at nibh at lectus luctus iaculis ac at enim. Donec sit amet malesuada leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at elit libero, at malesuada erat. Nullam pharetra facilisis adipiscing. Proin tincidunt, odio id volutpat ultrices, lacus mauris sagittis erat, at ullamcorper ligula ipsum non ligula. Proin eu purus risus, sed volutpat ligula. Morbi blandit arcu sit amet turpis varius vitae dapibus mauris consequat. Etiam et justo vel nunc venenatis interdum ut vitae justo.</p>
	<p>Morbi eu ligula ac arcu ornare lobortis. Sed arcu felis, consequat eu ultricies at, tincidunt in elit. Sed a mollis nunc. Maecenas eget enim dolor, vitae semper lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare erat eu augue placerat dignissim. Ut eleifend ligula laoreet lacus lobortis luctus. Aliquam in euismod orci. Donec posuere libero eu ipsum sagittis congue quis sed metus. Aenean dapibus ligula eu dui aliquet posuere. Quisque quis odio ut nisl sagittis aliquet eu non ligula. Nam cursus blandit leo vel sodales. Vivamus ut aliquam mi. Mauris vel magna sed ligula mattis fringilla sed eget lacus. Sed in lacus sit amet metus mollis sagittis eget vulputate arcu.</p>
	<p>Sed at nisi quam. Proin est ligula, consectetur id sagittis in, vestibulum at urna. Ut eu mi in libero semper lobortis. Phasellus magna elit, volutpat vel cursus in, ultricies sit amet diam. Nunc ullamcorper sapien quis ligula dictum elementum. Vestibulum a adipiscing neque. In mauris felis, dapibus eu aliquam quis, rutrum ut orci. Aliquam lacinia, libero vitae consequat blandit, sapien libero porttitor turpis, sit amet dictum sapien purus sed neque. Phasellus vehicula, orci et faucibus molestie, eros ligula ultrices risus, sed tincidunt nulla neque at purus.</p>
	<p>Aenean id erat sit amet lectus facilisis congue eget et dui. Donec non mauris sit amet sem lacinia facilisis vel ac urna. Nam in justo ante, ut porttitor nunc. Nunc vel purus ligula, eget consequat odio. Nulla blandit, mi a luctus lacinia, nunc nisl luctus nibh, at facilisis mauris orci id magna. Phasellus pharetra feugiat faucibus. Proin magna nulla, sollicitudin at adipiscing sit amet, interdum pulvinar neque. Nam ultrices erat vel leo ullamcorper vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi.</p>
	<p>Curabitur hendrerit lectus eu dui faucibus rhoncus. In ac enim a dui consequat viverra. Duis rhoncus lacinia risus, interdum imperdiet lectus pellentesque nec. Aenean euismod, nibh rutrum euismod bibendum, est sapien imperdiet neque, non pellentesque arcu ante non nibh. Duis cursus massa in velit eleifend tempus non vel lorem. Cras interdum est eget diam condimentum ultricies. In ac eleifend odio. Donec ultrices felis odio. Cras vulputate lectus dolor, at pellentesque sem. Duis at enim et mauris consequat pellentesque at vel est. Cras ultrices nisi a augue consequat quis lobortis erat iaculis. Sed et molestie massa. Donec id sem sed urna commodo accumsan. Donec condimentum malesuada turpis. Fusce dolor metus, placerat lobortis lobortis ut, varius sed purus.</p>
	<p>Fusce mattis nibh vel velit viverra aliquam. Nunc ante mi, consequat quis vehicula at, vestibulum sit amet elit. Donec ligula libero, venenatis vel consequat vitae, bibendum id dolor. Nulla nec lacus nunc. Aliquam erat volutpat. Praesent tristique ante lectus, sed placerat nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam non elit est. Nullam nec tempus arcu. Nullam ornare, eros eu vestibulum viverra, mi nisl auctor massa, nec rutrum enim turpis a justo. Aliquam hendrerit pulvinar lacus, eget commodo lectus sagittis et.</p>
	<p>Donec porttitor condimentum justo a rutrum. Morbi vel dolor felis, nec blandit tortor. Duis vitae augue ipsum. Fusce lacus mauris, hendrerit sit amet varius at, imperdiet ut elit. Morbi ac pellentesque sapien. Fusce auctor adipiscing nisl vitae blandit. Nam venenatis, sem id sodales scelerisque, ante quam viverra magna, nec scelerisque ligula purus at orci. In justo lorem, bibendum a tincidunt nec, ultricies vitae diam. Morbi vulputate vulputate est. Vestibulum sodales mattis sem, sed tristique nibh facilisis ac. Duis euismod congue egestas. In mi turpis, tristique et cursus vitae, vehicula ut dolor.</p>
	<p>Aliquam eu urna non ante vulputate ultrices. Duis sed nisi id urna lobortis accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat tellus, semper in placerat ac, interdum a velit. Nunc porttitor dictum blandit. Aenean euismod aliquet eros sed tristique. Nam at nisi quis turpis auctor luctus. Nullam in egestas arcu.</p>
	<p>Vivamus hendrerit varius risus, ut ullamcorper arcu feugiat nec. Quisque eros velit, gravida sit amet iaculis congue, condimentum at magna. Aliquam erat volutpat. Cras sollicitudin mi eget erat semper congue. Suspendisse eget aliquet turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean elementum congue auctor. Suspendisse a nulla faucibus erat varius laoreet in at velit. Vivamus rhoncus eleifend ornare. Fusce cursus rutrum dapibus. Nullam dapibus fermentum diam ac pellentesque. Fusce facilisis eros vitae mauris porttitor id ultrices odio suscipit. Maecenas est metus, vulputate sit amet lacinia ac, sodales quis lacus. Ut diam ligula, mollis eu ultricies a, aliquam eu mauris. Fusce consectetur augue vitae tellus lacinia sit amet sagittis risus tristique.</p>
	<p>Donec luctus, sem non lacinia cursus, nunc nisi molestie turpis, sit amet sodales mauris nibh eget lacus. Vestibulum tincidunt arcu a diam ultricies fringilla. Integer enim elit, sodales in sodales vel, vulputate in sapien. Ut egestas tincidunt neque a venenatis. Sed convallis rutrum lobortis. Proin augue nulla, mattis id aliquet a, porttitor sed ipsum. Suspendisse consequat nibh ut elit tempus suscipit. Aenean semper condimentum eros in varius. Duis vehicula nunc luctus sapien congue in blandit massa aliquet. In sollicitudin convallis consectetur. Quisque dictum ante a quam iaculis in aliquam augue ultricies. Donec quis odio enim.</p>
	<p>Phasellus tincidunt sollicitudin erat quis congue. Nam id nibh metus. Sed vehicula nisi non ipsum dictum volutpat. Donec in erat sit amet tortor ultrices egestas vitae sed nulla. Integer ornare velit et odio hendrerit aliquam. Vestibulum commodo congue metus, in cursus mauris vulputate quis. Duis aliquet dignissim leo, non lobortis felis aliquam eget. Aenean erat neque, scelerisque hendrerit egestas ac, faucibus a metus. Proin at sapien dui, eget iaculis metus. Vestibulum ac augue ligula, a placerat felis. Donec fermentum blandit mi. Fusce lorem sem, ornare nec cursus ut, vulputate a dolor. Donec at tellus nibh, eu gravida augue. Nunc id elit turpis.</p>
	<p>Quisque eget fringilla neque. Maecenas pretium condimentum nibh sit amet rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur mollis venenatis purus, ut scelerisque tellus rutrum ac. Quisque erat massa, facilisis a pretium in, viverra ac lectus. Proin massa tortor, dignissim convallis rhoncus quis, pellentesque in nisl. Donec pretium fringilla vehicula. Donec eu tortor at neque blandit mollis.</p>
	<p>Pellentesque ultrices vestibulum odio quis faucibus. Nunc dictum volutpat cursus. Integer tempus imperdiet urna nec luctus. Sed quis quam lectus, sed aliquam urna. Quisque eu magna sit amet felis lacinia cursus. Curabitur bibendum accumsan tincidunt. Quisque cursus nunc vel quam suscipit sed vehicula dui euismod. Duis viverra consequat est sit amet gravida. Mauris magna orci, dapibus et ultricies et, pretium a eros. Fusce venenatis, enim non viverra pharetra, justo risus sagittis odio, porta malesuada elit erat id quam. Maecenas semper ipsum ut ipsum suscipit viverra. Morbi tellus nunc, fringilla et luctus non, porttitor at tellus. Nunc magna felis, auctor pulvinar vehicula vitae, rhoncus ut lectus.</p>
	<p>Phasellus mi justo, faucibus in iaculis a, cursus et purus. Donec ornare iaculis nibh, sit amet viverra est feugiat ut. Nulla facilisi. Quisque a risus quam, non cursus eros. Maecenas purus leo, pretium gravida sodales et, dapibus non ipsum. Duis in enim nisi, quis venenatis purus. Praesent tempor purus nec ipsum imperdiet ut volutpat purus luctus.</p>
	<p>Donec ut ligula urna, vel tempus ligula. Praesent ornare, metus non sagittis imperdiet, purus massa pretium orci, id imperdiet libero risus ac nibh. Vivamus bibendum luctus risus eget auctor. Morbi at velit augue, at blandit libero. Aliquam erat volutpat. Nullam nunc augue, malesuada non porta et, cursus nec enim. Vivamus vehicula vehicula augue nec viverra.</p>
	<p>Phasellus nec tortor at sem elementum ultricies a vitae erat. Nullam mattis egestas metus id ultricies. Sed dui lorem, luctus vitae tempus ut, vulputate a tortor. Praesent quis arcu sit amet orci tincidunt aliquet. Curabitur eros ipsum, molestie et porta vel, ultricies quis odio. Vivamus ipsum nunc, posuere eu pharetra quis, tempus et velit. Sed iaculis, magna eu cursus congue, felis mauris accumsan orci, eget molestie odio sem id nunc. Mauris a risus et enim commodo sodales.</p>
	<p>In pharetra mi ac lacus ullamcorper porttitor. Mauris mollis diam vel ante vestibulum placerat non sit amet sem. Nullam at arcu ipsum, at commodo felis. Nam at purus consequat ante vestibulum feugiat nec sed elit. Curabitur convallis mollis bibendum. Fusce dolor neque, placerat at mollis eu, venenatis eget felis. Quisque risus felis, aliquet in euismod sed, vestibulum nec tellus. Vestibulum in massa libero, sit amet interdum risus. Proin nec metus tellus. Praesent aliquam risus quis nisl hendrerit suscipit euismod metus porttitor. Aenean id elit sit amet tellus rhoncus cursus. Vestibulum at ante sit amet sem lacinia vehicula vel non libero.</p>
	<p>Cras eu massa felis, vel tempus purus. Ut aliquam neque non leo eleifend et egestas libero sagittis. Maecenas at sem vitae eros laoreet interdum ut vitae erat. Phasellus eget erat felis, quis condimentum dui. Maecenas faucibus accumsan porta. In hac habitasse platea dictumst. Curabitur sit amet risus in leo porttitor viverra nec id sem. Etiam ac dolor in orci interdum elementum.</p>

</div>
<div id="generated">
    Generated 50 paragraphs, 4756 words, 31770 bytes of <a href="http://www.lipsum.com/" title="Lorem Ipsum">Lorem Ipsum</a>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/molokoloco/jquery-scrollview-v08-viewport-scroll-and-screen-vertical-helper-gLeca */
* {
  padding:0;
  margin:0;
}
/* ------------------------- jquery.scrollScreen.css ------------------------------------------------------------- */

/* a rectangle from top to bottom of the viewport (ex. 40*600) - User events zone */
div.scrollScreenZone { 
	position:fixed;
	z-index:999;
	top:0;
	right:0;
	bottom:0;
	width:40px;
	cursor:pointer;
}

/* a square that print pages and follow user OR scrollbar */
div.scrollScreen { 
	position:fixed;
	z-index:989;
	top:0;
	/*right:3px; -- Moz Bug corrected by JS --*/
    left:0;
    width:33px;
    height:33px;
    /* border-radius:3px; - skipped for fast perf */
    line-height:33px;
    font-size:16px;
    font-weight:normal;
    text-align:center;
    color:rgba(5,5,5,0.2);
    text-shadow:0 1px 0 rgba(250,250,250,0.6);
    /* box-shadow:inset 0 1px 0 rgba(250,250,250,0.6); - avoided for fast perf */
    background:rgba(5,5,5,0.05);
    
    -webkit-transition: background 1s cubic-bezier(0.215, 0.610, 0.355, 1.000),
                        top 1200ms cubic-bezier(0.215, 0.610, 0.355, 1.000); /*  easeOutCubic */
       -moz-transition: background 1s cubic-bezier(0.215, 0.610, 0.355, 1.000),
                        top 1200ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -ms-transition: background 1s cubic-bezier(0.215, 0.610, 0.355, 1.000),
                        top 1200ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
         -o-transition: background 1s cubic-bezier(0.215, 0.610, 0.355, 1.000),
                        top 1200ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition: background 1s cubic-bezier(0.215, 0.610, 0.355, 1.000),
                        top 1200ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
    div.scrollScreen.current {
		color:rgba(250,250,250,0.9);
        text-shadow:0 1px 0 rgba(0, 0, 0, 0.33);
        /* box-shadow:0 1px 0 rgba(250,250,250,0.6); - avoided for fast perf */
		background:rgba(5,5,5,0.3);
		text-decoration:none;
	}

/*--------------- For the demo only -----------------------*/

p, div {
    font:12px verdana, arial;
    line-height: 180%;
    color:rgb(90, 90, 90);
}

h1,h2,h3,h4,h5,h6,p {
    width: 80%;
    margin:10px;
}

/*Downloaded from https://www.codeseek.co/molokoloco/jquery-scrollview-v08-viewport-scroll-and-screen-vertical-helper-gLeca */
(function($, window, document) {
    
    // jQuery scrollView V0.8.3 : Viewport scroll and screen vertical helper - @molokoloco 2013 - Copyleft
    // One view for each screen that user need to scroll to get to the bottom of the HTML view
    // Live fiddle : http://jsfiddle.net/molokoloco/XK3t5/
    // Github : https://github.com/molokoloco/FRAMEWORK/blob/master/jquery.plugins/jquery.scrollScreen.js
    //          https://github.com/molokoloco/FRAMEWORK/blob/master/jquery.plugins/jquery.scrollScreen.css
    // Infos : http://www.b2bweb.fr/molokoloco/jquery-scrollview-viewport-scroll-and-screen-vertical-helper
    
    // Made another(older) plugin here : http://jsfiddle.net/molokoloco/Atj8Z/
    
    // ----------- SCROLLTOP + BROWSER BASE ---------------------------------------------------------------------------------- //
    
    var $window             = $(window),
        $document           = $(document),
        $body               = $('body'),
        scrollElements      = 'html,body,document',
        $scrollElement      = $(),
        newAnchror          = '',
        isAnimated          = false; // Tell if something is actually animating the scroll
    
    // Find scrollElement
    // Inspired by https://www.zachstronaut.com/posts/2009/01/18/jquery-smooth-scroll-bugs.html
    $(scrollElements).each(function(i) {
        // 'html, body' for setter... window for getter... 
        var initScrollTop = parseInt($(this).scrollTop(), 10);
        $(this).scrollTop(initScrollTop + 1);
        if ($window.scrollTop() == initScrollTop + 1) {
            scrollElements = this.nodeName.toLowerCase(); // html OR body
            return false; // Break
        }
    });
    $scrollElement = $(scrollElements);
    
    // ----------- UTILITIES ---------------------------------------------------------------------------------- //
    var getHash             = function() { return window.location.hash || ''; },
        setHash             = function(hash) { if (hash && getHash() != hash) window.location.hash = hash; },
        getWinWidth         = function() { return $window.width(); }, // iphone ? ((window.innerWidth && window.innerWidth > 0) ? window.innerWidth : $window.width());
        getWinHeight        = function() { return $window.height(); }, // iphone ? ((window.innerHeight && window.innerHeight > 0) ? window.innerHeight : $window.height());
        getPageWidth        = function() { return $document.width(); },
        getPageHeight       = function() { return $document.height(); },
        getScrollTop        = function() { return parseInt($scrollElement.scrollTop() || $window.scrollTop(), 10); },
        setScrollTop        = function(y) { $scrollElement.stop(true, false).scrollTop(y); },
        myScrollTo          = function(y) { // Call view scrolling to a value (like native window.scrollBy(x, y)) // Can be flooded
            isAnimated = true; // kill waypoint AUTO hash
            var duration = 360 + (Math.abs(y -  getScrollTop()) * 0.42); // Duration depend on distance...
            if (duration > 2222) duration = 0; // Instant go !! ^^
            $scrollElement
                .stop(true, false)
                .animate({scrollTop: y}, {
                    duration: duration,
                    easing: 'easeOutCubic',
                    complete: function() { // Listenner of scroll finish...
                        setHash(newAnchror); // If new anchor
                        newAnchror = '';
                        isAnimated = false;
                    }
                });
        };

    // ----------- $.easing ---------------------------------------------------------------------------------- //
    
    $.easing.jswing = $.easing.swing;
    $.extend($.easing, { // Extract from jQuery UI
        def: 'easeOutQuad',
        swing: function (x, t, b, c, d) { return $.easing[$.easing.def](x, t, b, c, d); },
        easeInQuad: function (x, t, b, c, d) { return c*(t/=d)*t + b; },
        easeOutCubic: function (x, t, b, c, d) {  return c*((t=t/d-1)*t*t + 1) + b; }
    });
    
    // ----------- $.scrollToMe() ---------------------------------------------------------------------------------- //
    
    $.fn.scrollToMe = function(target) { // Extend jQuery, call view scrolling to a element himself
        return this.each(function() {
            if (target) newAnchror = target; // Update hash, but after scroll anim
            myScrollTo(parseInt($(this).offset().top, 10));
        });
    };
    
    // ----------- $.scrollScreen() ---------------------------------------------------------------------------------- //
    
    $.fn.scrollScreen = function(options) {

        if ($body.data('scrollScreen') == true) return this; // Only once... and one
        $body.data('scrollScreen', true);
        
        // ----------- SETTINGS ---------------------------------------------------------------------------------- //
        
        // Merge user options
        options = $.extend(true, {}, $.fn.scrollScreen.defaults, typeof options == 'object' &&  options);
        
        var 
        // Public vars
            $container            = $(this),
            $scrollScreen         = $('<div class="'+options.scrollScreen+'">1</div>')
                                    .appendTo($container),
            $scrollScreenZone     = $('<div class="'+options.scrollScreenZone+'" title="Pour naviguer d\'écran en écran..."></div>')
                                    .appendTo($container);
        
        var 
        // Privates vars
            mouseIsMoveViewsInt   = null,
            windowTmr             = null,
            currentHeight         = getWinHeight(),
            currentPageHeight     = getPageHeight(),
            maxScroll             = (totalViews - 1) * currentHeight,
            scrollHeight          = currentHeight * (currentHeight / currentPageHeight),
            totalViews            = 1 + Math.floor(getPageHeight() / currentHeight),    
            scrollScreenMarginTop = - (Math.floor($scrollScreen.height() - ($scrollScreen.height() / 3))),
            scrollScreenMaxTop    = currentHeight - $scrollScreen.height();
        
        console.log('currentHeight', currentHeight);
        console.log('currentPageHeight', currentPageHeight);
      
        var 
            // ----------- VIEWPORT SCREEN VIEWS
            posScrollScreenRight = function() {
                // right:3px; > Moz Bug
                $scrollScreen.css({left:getPageWidth() - $scrollScreen.width() - 3});
            },
            mouseIsMoveViewsClear = function() {
                if (options.debug) console.log('mouseIsMoveViewsClear()');
                if (mouseIsMoveViewsInt) clearTimeout(mouseIsMoveViews);
                if (isAnimated) {
                    mouseIsMoveViewsInt = setTimeout(mouseIsMoveViewsClear, 2500); // Wait end of scrolling user anim
                }
                else {
                    mouseIsMoveViewsInt = null;
                    $scrollScreen.removeClass('current');
                    $scrollScreenZone.attr('title', '');
                    setCurrentViewport(getScrollTop()); // Reset
                }
            },
            mouseIsOutViews = function(event) {
                if (options.debug) console.log('mouseIsOutViews(event)', event);
                if (mouseIsMoveViewsInt) clearTimeout(mouseIsMoveViews);
                mouseIsMoveViewsInt = setTimeout(mouseIsMoveViewsClear, 2500); // Reset ?
            },
            moveViews = function(ascPos) { // Move and update Viewport slider text
                if (options.debug) console.log('moveViews(ascPos)', ascPos);
                ascPos = ascPos || getScrollTop();
                ascPos = ascPos + scrollScreenMarginTop; // Set some margin with user cursor pos
                ascPos = Math.max(ascPos, 0);
                ascPos = Math.min(ascPos, scrollScreenMaxTop);
                var view = 1 + Math.floor(totalViews * (ascPos / currentHeight)); // view 1 == < winHeight : ceil

                $scrollScreen // .stop(true, false).animate({top:ascPos}, 250, 'easeOutCubic');  // JS skipped for CSS : transition
                    .css({top:ascPos})
                    .text(view);
                if (options.checkHash  && getHash() != '#screen_'+view) setHash('#screen_'+view);
            },
            mouseIsMoveViews = function(event) {
                if (options.debug) console.log('mouseIsMoveViews(event)', event.clientY);
                if (mouseIsMoveViewsInt) {
                    clearTimeout(mouseIsMoveViewsInt);
                    mouseIsMoveViewsInt = null;
                }
                else $scrollScreen.addClass('current');
                moveViews(event.clientY);
            },
            setCurrentViewport = function(scrollTop) { // I cannot pretend to be exactly aligned with the browser scrollbar :-/
                if (options.debug) console.log('setCurrentViewport(scrollTop)', scrollTop);
                var currentScroll  = scrollTop || getScrollTop(),
                    ascPosRatio    = (currentScroll + currentHeight) / currentPageHeight, // % in the viewport
                    ascPos         = (currentHeight - scrollHeight) * ascPosRatio; // Pix in the viewport
                moveViews(ascPos);
            },
            moveToViewport = function(view) { // Lead to corresponding screen number
                if (options.debug) console.log('moveToViewport(view)', view);
                var scrollTarget = 0;
                if (view == totalViews) scrollTarget = currentPageHeight; // (totalViews - 1) * currentHeight; // To be certain to reach the end...
                else scrollTarget = view * currentHeight;
                myScrollTo(scrollTarget);
                return false;
            },
            viewportClick = function(event) { // Paginette links click lead to corresponding screen scroll
                if (options.debug) console.log('viewportClick(event)', event);
                var ascPos = 0;
                if (event.clientY < 10) ascPos = 0;
                else if (event.clientY > (currentHeight - 10)) ascPos = currentPageHeight;
                else ascPos = currentPageHeight * ((event.clientY + scrollScreenMarginTop) / currentHeight);
                myScrollTo(ascPos);
                return false;
            },
            viewportDbClick = function(event) { // Double click to run up...
                if (options.debug) console.log('viewportDbClick()');
                myScrollTo(1);
                return false;
            },
            createViewport = function() { // Build viewport 
                if (options.debug) console.log('createViewport()');
                $scrollScreenZone
                    .on('click touchend', viewportClick)
                    .on('dblclick',       viewportDbClick)
                    .on('mousemove',      mouseIsMoveViews)
                    .on('mouseout',       mouseIsOutViews);
                $scrollScreen
                    .on('click touchend', viewportClick); // IE
                setCurrentViewport();
            };
        
        posScrollScreenRight();
        createViewport();

        var
        // ----------- WIN EVENTS ---------------------------------------------------------------------------------- //
            scrollRefreshEvent = function() {
                if (options.debug) console.log('scrollRefreshEvent()');
                windowTmr = null;
                $scrollScreen.removeClass('current');
            },
            scrollling = function(event) {
                // if (options.debug) console.log('scrollling()'); // Flood
                if (windowTmr) clearTimeout(windowTmr);
                windowTmr = setTimeout(scrollRefreshEvent, 600); //trottle resize : Wait a pause of 300ms before triggering
                setCurrentViewport();
                $scrollScreen.addClass('current');
            },
            resizeRefreshEvent = function(target) { // Global EVENT.RESIZE dispatcher, ok TODO with pub/sub pattern...
                if (options.debug) console.log('resizeRefreshEvent()');
                currentHeight     = getWinHeight();
                currentPageHeight = getPageHeight();
                maxScroll         = (totalViews - 1) * currentHeight;
                scrollHeight      = currentHeight * (currentHeight / currentPageHeight);
                totalViews        = Math.ceil(getPageHeight() / currentHeight);
                if (totalViews <= 1) $scrollScreen.hide();
                else $scrollScreen.show();
                posScrollScreenRight();
                setCurrentViewport();
                if (options.checkHash)
                    windowTmr = setTimeout(function(_target) {
                        windowTmr = null;
                        checkHash(_target); // Repos scroll to current ?
                    }, 1000, target || getHash());
            },
            resizing = function(event) { // Resize Event
                // if (options.debug) console.log('resizing()'); // Flood
                if (windowTmr) clearTimeout(windowTmr);
                windowTmr = setTimeout(resizeRefreshEvent, 360, getHash()); // trottle resize, pass current hash...
            };

        $window
            .on('scroll', scrollling)
            .on('resize', resizing);
        
        resizeRefreshEvent();

        // ----------- DOCUMENT LOCATION INIT ---------------------------------------------------------------------------------- //

        var checkHash = function(hash) {
            if (options.debug) console.log('checkHash(hash)', hash, 'getHash()', getHash());
            var initTarget = hash || getHash();
            if (initTarget) {
                initTarget = initTarget.split('screen_'); // Catch fake hash // '#screen_'+view
                if (parseInt(initTarget[1], 10) > 1) { // (initTarget.length > 0) {
                    // $(initTarget[0]).scrollToMe(initTarget[0]); // #chapter_4_screen (fake) == #chapter_4 (real one)
                    moveToViewport(initTarget[1]);
                }
            }
        };

        if (options.checkHash) checkHash();
        
        // ----------- jQuery element plugin (body ?) ---------------------------------------------------------------------------------- //
        
        // Iterate collections // Maybe later ?
        // return this.each(function() {});
        return this;
    };

    // Default setup options
    $.fn.scrollScreen.defaults = {
        debug             : ('console' in window && /* DEBUG ? */false), // Log all functions and events ?
        checkHash         : false, // On doc init, look for some anchors in the URL to scroll to ?...
        scrollScreenZone  : 'scrollScreenZone', // CSS class, without dot.
        scrollScreen      : 'scrollScreen'
    };
    
})(jQuery, window, document); // End of the Scrolling Lab Closure... //

//////////////////////////////////////////////////////////////////////////////////////////////////////
// Usage example... //////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////

$('body').scrollScreen({ // Use it...
    checkHash        :  true,              // On doc init, look for some anchors in the URL to scroll to ?...
    scrollScreen     : 'scrollScreen',
    scrollScreenZone : 'scrollScreenZone' // CSS class, withou dot.
});

Comments