JavaScript DHTML/Window Browser/Browser Scroll

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

Forcing Scrolling to Stay at the Page Top

<HTML>
<HEAD>
<TITLE>onScroll Event Handler</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function scrollBack() {
    window.scroll(0,0)
}
function init() {
    document.body.onscroll = scroll;
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>onScroll Event Handler</H1>
<HR>
  This page always zips back to the top if you try to scroll it.
<P>
<IFRAME FRAMEBORDER=0 SCROLLING="no" HEIGHT=1000 SRC="http://www.wbex.ru"></IFRAME>
</P>
</BODY>
</HTML>



Scroll the window to a specified position

<html>
<head>
<script type="text/javascript">
function scrollWindow(){
    window.scrollTo(100,500)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="scrollWindow()" value="Scroll">
</form>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
2
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>



Viewing the scrollLeft and scrollTop Properties

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
Publisher: John Wiley & Sons CopyRight 2001
ISBN: 0764533428
*/
<HTML>
<HEAD>
<TITLE>Master of all Windows</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function leftFrame() {
    var output = "<HTML><BODY><H3>Body Scroll Values</H3><HR>\n"
output += "<FORM>body.scrollLeft:<INPUT TYPE="text" NAME="xOffset" SIZE=4><BR>\n"
    output += "body.scrollTop:<INPUT TYPE="text" NAME="yOffset" SIZE=4><BR>\n"
    output += "</FORM></BODY></HTML>"
    return output
}
function rightFrame() {
    var output = "<HTML><HEAD><SCRIPT LANGUAGE="JavaScript">\n"
    output += "function showOffsets() {\n"
    output += "parent.readout.document.forms[0].xOffset.value =  document.body.scrollLeft"
    output += "parent.readout.document.forms[0].yOffset.value =  document.body.scrollTop}"
    output += "document.onclick = showOffsets\n"
    output += "<\/SCRIPT></HEAD><BODY>"
    output += "Scroll this frame and click on a table border to view page offset values.<BR><HR>"
    output += "<TABLE BORDER=5>"
    var oneRow = "<TD>Cell 1</TD><TD>Cell 2</TD><TD>Cell 3</TD><TD>Cell 4</TD>" +
        "<TD>Cell 5</TD>"
    for (var i = 1; i <= 300; i++) {
         output += "<TR><TD><B>Row " + i + "</B></TD>" + oneRow + "</TR>"
    }
    output += "</TABLE></BODY></HTML>"
    return output
}
</SCRIPT>
</HEAD>
<FRAMESET COLS="30%,70%">
    <FRAME NAME="readout" SRC="javascript:parent.leftFrame()">
    <FRAME NAME="display" SRC="javascript:parent.rightFrame()">
</FRAMESET>
</HTML>