JavaScript DHTML/Scriptaculous/Scroll
Содержание
- 1 Control speed for scrolling
- 2 script.aculo.us ScrollTo effect functional test
- 2.1 first-headingHeading 2
- 2.2 Heading 2
- 2.3 Heading 2
- 2.4 Heading 2
- 2.5 Heading 2
- 2.6 Heading 2
- 2.7 Heading 2
- 2.8 Heading 2
- 2.9 Heading 2
- 2.10 Heading 2
- 2.11 Heading 2
- 2.12 Heading 2
- 2.13 DOWN BELOWHeading 2
- 2.14 Heading 2
- 2.15 Heading 2
- 2.16 Heading 2
- 2.17 Heading 2
- 2.18 Heading 2
- 2.19 Heading 2
- 2.20 Heading 2
- 2.21 Heading 2
- 2.22 Heading 2
- 2.23 Heading 2
- 2.24 Heading 2
- 2.25 Heading 2
- 2.26 Heading 2
- 2.27 Heading 2
- 2.28 Heading 2
- 2.29 Heading 2
- 2.30 Heading 2
- 2.31 Heading 2
- 2.32 Heading 2
- 2.33 Heading 2
- 2.34 Scroll to bottom
- 3 script.aculo.us ScrollTo effect (with floats) functional test
Control speed for scrolling
<source lang="html4strict">
<!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="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>
</head> <body>
script.aculo.us ScrollTo effect functional test
<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>
first-headingHeading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
DOWN BELOWHeading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
<a href="#" onclick="new Effect.ScrollTo("first-heading"); return false;">scroll...</a>
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
Heading 2
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
</body> </html>
</source>
Scroll to bottom
<source lang="html4strict">
<!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="scriptaculous-js-1.8.2/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/scriptaculous.js" type="text/javascript"></script> <script src="scriptaculous-js-1.8.2/src/unittest.js" type="text/javascript"></script>
</head> <body>
script.aculo.us ScrollTo effect (with floats) functional test
(this test only applies to Firefox)
top of float
<a href="#" onclick="new Effect.ScrollTo("bottom-of-float");return false;">scroll to bottom!</a>
Bottom of Float
w00t
<script> window.scrollBy(0, 200); </script>
</body> </html>
</source>