Keep the image position with respect to scroll bar movement

@pj59Dec 14.2004 — #Hello!

Here is an example:

[code=php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Snippet</title>
 <script language="JavaScript" type="text/javascript">
 <!--
 var orgTop;
 function init(){
 orgTop=document.getElementById('scrImg').offsetTop;
 window.onscroll=scrFunc;
 }
 function scrFunc(){
 document.getElementById('scrImg').style.top=document.body.scrollTop+orgTop;
 }
 //-->
 </script>
 </head>
 <body onload="init()">
 <div style="height: 2500px">
 <a name="toTop"></a>
 <div style="height: 200px">blah 1</div>
 <div style="height: 200px">blah 2</div>
 <div style="height: 200px">blah 3</div>
 <div style="height: 200px">blah 4</div>
 <div style="height: 200px">blah 5</div>
 <div style="height: 200px">blah 6</div>
 <div style="height: 200px">blah 7</div>
 <div style="height: 200px">blah 8</div>
 <div style="height: 200px">blah 9</div>
 <div style="height: 200px">blah 10</div>
 <div style="height: 200px">blah 11</div>
 <div style="height: 200px">blah 12</div>
 <div style="height: 200px">blah 13</div>
 </div>
 <div id="scrImg" style="position:absolute;right: 20px;bottom:20px">
 <img src="yourImage.gif" alt="&nbsp;go to top&nbsp;" border=0 onclick="window.scrollTo(0,0);scrFunc()" style="cursor: pointer">
 </div>
 </body>
 </html>[/code]

Please note: in Mozilla, the onscroll event will not fire if the user scrolls by using the mouse wheel. If you want the code to work in such a case as well, the function scrFunc() should call itself with a setTimeout or setInterval instead of being called onscroll.

Regards PJ

Keep the image position with respect to scroll bar movement

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Keep the image position with respect to scroll bar movement

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴