Make a control move down page when scrolling

  • Thread starter Thread starter dave
  • Start date Start date
D

dave

I have a long data entry web page that requires the user to scroll down
for further data entry boxes. There is a "Save changes" button towards
the top of the screen which disappears as the user scrolls down the
page.

Rather than place duplicate "Save changes" buttons at regular points
down the page I would like to have a single button that moves down the
page as the user scrolls down, maintaining its position on the page. Is
it possible to do this? We use Visual Studio.Net 2003 for development.

Thanks in advance.
 
Hi Dave,

This is done by using a little CSS and a little JavaScript. You create an
element that uses CSS absolute positioning, and a script to position it.
Then you add another script to handle the window.onscroll event. Here is an
example. It is a complete test HTML document which you can copy into
Notepad, save with a .htm extension, and test it in your browser:

<HTML>
<HEAD>
<TITLE>Title</TITLE>
<script type="text/javascript"><!--
function repos()
{
var el = document.getElementById("div1");
var t = document.body.scrollTop + 10;
document.getElementById("Button1").style.top = t;
}
// --></script>
</HEAD>
<BODY>
<form method="post">
<input style="position:absolute; left: 10px; top: 10px;z-index=2;"
name="Button1" id="Button1" type="button" value="button"></form>
<script type="text/javascript"><!--
window.onscroll = repos;
// --></script>
<p>&nbsp;stuff</p><p>&nbsp;stuff</p><p>&nbsp;more stuff</p><p>&nbsp;even
more stuff</p>
<p>&nbsp;stuff</p><p>&nbsp;stuff</p><p>&nbsp;more stuff</p><p>&nbsp;even
more stuff</p>
<p>&nbsp;stuff</p><p>&nbsp;stuff</p><p>&nbsp;more stuff</p><p>&nbsp;even
more stuff</p>
<p>&nbsp;stuff</p><p>&nbsp;stuff</p><p>&nbsp;more stuff</p><p>&nbsp;even
more stuff</p>
<p>&nbsp;stuff</p><p>&nbsp;stuff</p><p>&nbsp;more stuff</p><p>&nbsp;even
more stuff</p>
<p>&nbsp;stuff</p><p>&nbsp;stuff</p><p>&nbsp;more stuff</p><p>&nbsp;even
more stuff</p>
<p>&nbsp;stuff</p><p>&nbsp;stuff</p><p>&nbsp;more stuff</p><p>&nbsp;even
more stuff</p>
<p>&nbsp;stuff</p><p>&nbsp;stuff</p><p>&nbsp;more stuff</p><p>&nbsp;even
more stuff</p>
<p>&nbsp;stuff</p><p>&nbsp;stuff</p><p>&nbsp;more stuff</p><p>&nbsp;even
more stuff</p>
<p>&nbsp;stuff</p><p>&nbsp;stuff</p><p>&nbsp;more stuff</p><p>&nbsp;even
more stuff</p>
<p>&nbsp;stuff</p><p>&nbsp;stuff</p><p>&nbsp;more stuff</p><p>&nbsp;even
more stuff</p>
<p>&nbsp;stuff</p><p>&nbsp;stuff</p><p>&nbsp;more stuff</p><p>&nbsp;even
more stuff</p>
<p>&nbsp;stuff</p><p>&nbsp;stuff</p><p>&nbsp;more stuff</p><p>&nbsp;even
more stuff</p>
<p>&nbsp;stuff</p><p>&nbsp;stuff</p><p>&nbsp;more stuff</p><p>&nbsp;even
more stuff</p>
<p>&nbsp;stuff</p><p>&nbsp;stuff</p><p>&nbsp;more stuff</p><p>&nbsp;even
more stuff</p>
<p>&nbsp;stuff</p><p>&nbsp;stuff</p><p>&nbsp;more stuff</p><p>&nbsp;even
more stuff</p>
</body>
</html>

--
HTH,

Kevin Spencer
Microsoft MVP
Bit Player
http://unclechutney.blogspot.com

Expect the unaccepted.
 
Kevin,

That is excellent. Thank you. That seems so easy now that I've seen it
but I could find no reference to this for love nor money in any of the
Groups - perhaps it's just so simple I'm the only one that needs to
ask!

Thanks again.

Dave
 
Kevin,

Apologies - a supplementary question. Although the button "scrolling"
is excellent it has the side-effect of disabling SmartNavigation on the
page. So, it's great that the "Save" button is now visible at all times
as the user scrolls down the page, but after the button is clicked the
focus of the page returns to somewhere close to the top of the page.

Any ideas on how to overcome that?

Dave
 
Back
Top