Skip to content
Browse files

script.aculo.us: added Effect.ScrollTo

git-svn-id: http://svn.rubyonrails.org/rails/spinoffs/scriptaculous@1756 5ecf4fe2-1ee6-0310-87b1-e25e094e27de
  • Loading branch information...
1 parent a896f94 commit c97b2b7c48dbe4c1263cab57991003438722932f @madrobby committed Jul 7, 2005
Showing with 507 additions and 0 deletions.
  1. +2 −0 CHANGELOG
  2. +21 −0 src/effects.js
  3. +484 −0 test/effects_scrollto.html
View
2 CHANGELOG
@@ -1,5 +1,7 @@
*SVN*
+* Added Effect.ScrollTo to smoothly scroll the page to an element
+
* Better Firefox flickering handling on SlideUp/SlideDown
* Some cleaning up in effects.js
View
21 src/effects.js
@@ -286,6 +286,27 @@ Effect.Highlight.prototype = (new Effect.Base()).extend({
}
});
+Effect.ScrollTo = Class.create();
+Effect.ScrollTo.prototype = (new Effect.Base()).extend({
+ initialize: function(element) {
+ this.element = $(element);
+ Position.prepare();
+ var offsets = Position.cumulativeOffset(this.element);
+ var max = window.innerHeight ?
+ window.height - window.innerHeight :
+ document.body.scrollHeight -
+ (document.documentElement.clientHeight ?
+ document.documentElement.clientHeight : document.body.clientHeight);
+ this.scrollStart = Position.deltaY;
+ this.delta = (offsets[1] > max ? max : offsets[1]) - this.scrollStart;
+ this.start(arguments[1] || {});
+ },
+ update: function(position) {
+ Position.prepare();
+ window.scrollTo(Position.deltaX,
+ this.scrollStart + (position*this.delta));
+ }
+});
/* ------------- prepackaged effects ------------- */
View
484 test/effects_scrollto.html
@@ -0,0 +1,484 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <title>script.aculo.us Effects functional test file</title>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <script src="../lib/prototype.js" type="text/javascript"></script>
+ <script src="../src/effects.js" type="text/javascript"></script>
+ <script src="../src/dragdrop.js" type="text/javascript"></script>
+ <script src="../src/controls.js" type="text/javascript"></script>
+</head>
+<body>
+<h1>script.aculo.us ScrollTo effect functional test</h1>
+
+<a href="#" onclick="new Effect.ScrollTo('down-below',{duration:5.0}); return false;">scroll (slow-mo) down-below...</a>,
+<a href="#" onclick="new Effect.ScrollTo('last-heading'); return false;">scroll last-heading</a>
+
+<h2 id="first-heading"><b>first-heading</b>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2 id="down-below"><b>DOWN BELOW</b>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<a href="#" onclick="new Effect.ScrollTo('first-heading'); return false;">scroll...</a>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2>Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+<h2 id="last-heading">Heading 2</h2>
+<ul>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+ <li>item</li>
+</ul>
+
+
+</body>
+</html>

0 comments on commit c97b2b7

Please sign in to comment.
Something went wrong with that request. Please try again.