Skip to content

Scroll helper #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jeremypetrequin wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Scroll helper #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
959e504
Scroll helper, first commit
jeremypetrequin Mar 21, 2013
4953f2d
bug fix
jeremypetrequin Mar 21, 2013
e5ad341
bugfix + min
jeremypetrequin Mar 21, 2013
705cac8
Bugfix + indentation
jeremypetrequin Mar 21, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,10 @@ If you have in your website some pages that are bit long, and therefore will req

##How?
There's a complete blog article about the plugin on NOE interactive's website here: http://noe-interactive.com/scroll-to-top-jquery-plugin (written in french)
You can also view the demonstration located there: http://noe-interactive.com/demo/!/scrollToTop
You can also view the demonstration located there: http://noe-interactive.com/demo/!/scrollToTop


#Scroll Helper jQuery Plugin
Help both the visitor and the developper to manage scroll!
- visitor : have a link to scroll down, then to scroll up
- developper : have callback on scroll (request animation frame, so more performant than native scroll event), scrollStart, scrollEnd, with the scrolling side (bottom or top);
144 changes: 144 additions & 0 deletions demo_helper.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="fr"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="fr"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="fr"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="fr"> <!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Scroll To Top jQuery Plugin | NOE interactive</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="skinNoe/skin.css" />

<meta name='robots' content='noindex,nofollow' />
<link rel='stylesheet' id='scrollToTop-css' href='scrollToTop.css' type='text/css' media='all' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>

<meta name="description" content="How to setup the Scroll To Top jQuery Plugin, by NOE Interactive" />
<meta name="keywords" content="jQuery,jQuery plugin, NOE Interactive, javascript, scroll" />
<link rel="canonical" href="http://noe-interactive.com/demo/!/scrollToTop"/>

</head>

<body class="page lang-fr">

<div id="wrapper" class="hfeed">

<header>
<section class="contained">
<a id="logo" title="NOE interactive" href="http://noe-interactive.com">NOE interactive</a>
</section>
</header>

<div id="main" role="main">
<section id="content">
<article id="post-988" class="post-988 page type-page status-publish hentry">
<div class="entry-title">
<h1>Scroll To Top jQuery Plugin</h1>
</div>
<div id="tinymce" class="entry-content">
<section class="contained">
<div id="longList">
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div>
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div>
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div>
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div>
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div>
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div>
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div>
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div>
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div>
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div>
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div>
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div>
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div>
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div>
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div>
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div>
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div>
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div>
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div>
<div style="margin: 40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel varius est. Cras lobortis tristique ligula, at venenatis arcu pretium convallis. Duis lacus massa, ornare quis ultricies accumsan, convallis vel quam. Donec eget massa magna. Nunc pharetra dolor id erat rhoncus mattis. Proin massa lacus, vehicula vel pharetra nec, mattis eu odio. Praesent ut dui sem. Sed semper pulvinar nunc, et blandit elit porta eu. Praesent tristique ipsum a sapien faucibus at laoreet nibh cursus.
</div></div> </section>
</div>
</article>
</section>
</div><!-- #main -->

<div class="visualClear"></div>

<footer>
<section class="contained">
<section class="aix">
<h2>Aix les Bains</h2>
<address>Savoie Hexapole<br />Batiment papyrus<br />73420 Méry</address>
<span class="tel">Tél. 04 79 63 39 73</span>
</section>

<section class="lyon">
<h2>Lyon</h2>
<address>11 rue waldeck<br />Rousseau<br />69006 Lyon</address>
<span class="tel">Tél. 04 72 37 41 49</span>
</section>

<a href="http://twitter.com/NOE_Interactive/" title="Twitter : @NOE_Interactive" class="twitter tooltip-s" target="_blank"><span>Twitter</span></a>
<a href="http://www.facebook.com/NOEinteractive" title="Facebook : NOE interactive" class="facebook tooltip-s" target="_blank"><span>Facebook</span></a>

<ul id="footerlinks">
<!-- <li><a href="/mentions">Mentions Légales</a></li> -->
<li><a id="noecopy" href="http://www.noe-interactive.com/" target="_blank" title="handmade by NOE">©2002-2012 NOE interactive</a></li>
</ul>
</section>
</footer>

</div><!-- #wrapper -->
<script type='text/javascript' src='scroll-helper.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function($){
$('#content').scrollHelper({
classes : ['backtotopinstance', 'scroll-helper-instance']
});
});
</script>

</body>
</html>
Loading