Make a control move down page when scrolling

dave · Dec 11, 2006

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.

Kevin Spencer · Dec 11, 2006

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"></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"></script>
 stuff stuff more stuff even
more stuff
 stuff stuff more stuff even
more stuff
 stuff stuff more stuff even
more stuff
 stuff stuff more stuff even
more stuff
 stuff stuff more stuff even
more stuff
 stuff stuff more stuff even
more stuff
 stuff stuff more stuff even
more stuff
 stuff stuff more stuff even
more stuff
 stuff stuff more stuff even
more stuff
 stuff stuff more stuff even
more stuff
 stuff stuff more stuff even
more stuff
 stuff stuff more stuff even
more stuff
 stuff stuff more stuff even
more stuff
 stuff stuff more stuff even
more stuff
 stuff stuff more stuff even
more stuff
 stuff stuff more stuff even
more stuff
</body>
</html>

--
HTH,

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

Expect the unaccepted.

dave · Dec 11, 2006

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

dave · Dec 11, 2006

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

A website that I couldn't make a screenshot of it nor save any page from.	1	Oct 29, 2023
Sticky Header - How Do I Make It Hide/Show on Scroll?	0	Sep 27, 2021
Can I move page above hash?	0	Sep 9, 2013
Make a user control floatable?	3	May 31, 2007
"non scrolling" page	1	Sep 26, 2008
"Please Wait" Scrolling Off Screen	1	Apr 14, 2008
Page flickers due to forced scrolling	4	Mar 6, 2008
move back to bottom of page after postback	1	Apr 15, 2008

Make a control move down page when scrolling

dave

Kevin Spencer

dave

dave

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads