JavaScript DHTML/Scriptaculous/Scroll

Материал из Web эксперт
Перейти к: навигация, поиск

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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Scriptaculous/Scroll&oldid=3649»