| Normally, most people think of scrolling the Web page as something that the visitor does using the built-in scroll bars on the right side or bottom of the window or frame. However, Web designers can use JavaScript to enable visitors to scroll around the page without having to interact with the window's built-in scroll controls. In this example (Figures 17.17, 17.18, and 17.19), three objects are positioned far apart on the page. Each position has controls to scroll directly to the other positions. Figure 17.17. The links "Down" and "Over" scroll the page horizontally and vertically without using the scrollbars. 
Figure 17.18. Clicking "Down" scrolls the Web page down and back to the left. 
Figure 17.19. Clicking "Over" scrolls the Web page to the right, as indicated by the change in the scrollbar position. 
To scroll a Web page: | | 1. | function scrollPageTo(objectID) {...}
Add the function scrollPageTo() to your JavaScript (Code 17.11).
Code 17.11. The scrollPage() function takes the coordinates fed to it and scrolls the page to that position.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Changing the Page's Scroll Position</title> <script type="text/javascript"> function scrollPageTo(objectID) { var object = document.getElementById (objectID); var nX =object.offsetLeft - 8; var nY = object.offsetTop - 8; if (document.body.scrollLeft) { document.body.scrollLeft = nX; document.body.scrollTop = nY; return; } else { scrollTo(nX, nY); return; } } </script> <style type="text/css" media="screen"> a { text-decoration: none; font-weight: bold; color: red; } #topPage { position: absolute; top: 8px; left: 8px;} #overHere { position: absolute; top: 10px; left: 2000px; width: 1024px;} #downHere { position: absolute; top: 2000px; left: 10px; height: 1024px;} </style> </head> <body> <div > <a href="#" onclick=scrollPageTo ('downHere')">↓ Down</a> | <a href="#" onclick=scrollPageTo ('overHere')">Over &</a> <p><img src="/books/3/292/1/html/2/alice25.gif" height="228" width="300" alt="Tea Party" /></p> </div> <div > <a href="#" onclick=scrollPageTo ('topPage')">↑ Back to Top</a> | <a href="#" onclick=scrollPageTo ('overHere')">Over →</a> <p><img src="/books/3/292/1/html/2/alice27.gif" height="180" width="200" alt="Mad Hatter" /></p> </div> <div > <a href="#" onclick=scrollPageTo ('downHere')">↓ Down</a> | <a href="#" onclick=scrollPageTo ('topPage')">← Back to Left</a> <p><img src="/books/3/292/1/html/2/alice26.gif" height="200" width="179" alt="Picture 3" /></p> <br /> </div> </body></html>
|
This function calculates the position to which the element is being scrolled (object.offsetLeft and object.offsetTop) and subtracts 8 pixels to give it a little space. It then uses the scrollLeft and scrollRight properties for Internet Explorer, or it uses the scrollTo method for other browsers to scroll the page to the specified object on the page.
| 2. | #overHere {...}
Set up the CSS rules for your object(s) with values for position and top and left positions.
In this example, I've set up two objects: one positioned well below the top of the page and one positioned to the far-right side of the page. Now the scrollPageTo() function has somewhere to go.
| 3. | onclick="scrollPageTo('overHere'); return false;"
Set up a link to trigger the scrollPageTo() function, and pass to the function the ID for the element to which you want to scroll.
|
 Tips
Although the example in this section still relies on the visitor to click something to cause the page to scroll, you could just as easily have used some other event handler to cause the page to scroll without the direct command of the visitor (by using onload, for example). Be careful when doing this, however. If the page suddenly starts jumping around, the effect can be confusingnot to mention unnervingto the person viewing your Web page. Netscape Navigator 4 (Windows) and Netscape 6 (all platforms) have an unfortunate "feature" that prevents this technique from working in a frame where the scrollbars have been hidden (scrolling="no"). Rather than simply making the scrollbars disappear, setting scrolling to no in these browsers will prevent the frame from scrolling at alleven with JavaScript. To add a bit of flair to this script, you could add the animation functionality shown earlier in this chapter to have the page gradually scroll from point-to-point rather than just jumping around.
|
