PDA

View Full Version : DIV - Scroll to Top - With one Click

Jerome
01-04-2003, 07:43 PM
Hi,

I am looking for a function which when a DIV is scrolled, with it's vertical scroll-bar to let we say half the page, in one click scrolls back to the top.

Thanks
Jerome
Mr J
01-05-2003, 12:49 PM
To give you some idea of what it entails

See

www.huntingground.freeserve.co.uk/style/lyrscrud.htm
Jerome
01-05-2003, 03:27 PM
Herewith a quick example, with at the bottom some remarks

<html>

<head>

<SCRIPT LANGUAGE="JavaScript1.2">
function F1(){

var E1=document.getElementById('d4');
E1.scrollTo(0);

}

</script>
</head>

<style>
#k4{
position:absolute;
top:100;
left:100;
height:200;
width:200;
border:1px solid red;
overflow:auto;}
#d4{
overflow:none;}


</style>

<body>

<div id="k4">

<div id="d4">

A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
A<br>
B<br>
B<br>
B<br>
B<br>
B<br>
B<br>
B<br>
B<br>
B<br>
B<br>

</div>

</div>

Hi,

I made a quick example to explane better what I like:

Scroll this to the bottom and after:

<a href="javascript:F1();">
Click Here to Scroll Back to the Top e.g. The First A
</a>

Any suggestions to make it work?

It's not interesting for me to have slow scrolling from left to right, up and down, changing layers and so on.

I want the div which contains the text to be reset in the basic position.
Thanks for any help,
Jerome

</body>

</html>
Mr J
01-05-2003, 05:09 PM
Try the following



<HTML>
<HEAD>
<TITLE>Document Title</TITLE>


<style>
.cont{
position:absolute;
left:150;
top:100;
width:200;
height:300;
font-size:30;
overflow:auto
}

.cont2{
position:absolute;
left:450;
top:100;
width:200;
height:200;
font-size:30;
overflow:auto
}
</style>

<script language="JavaScript">
<!--
function back_to_top(id){
document.getElementById(id).scrollTop=0
}
// -->
</script>

</HEAD>
<BODY>

<div id="One" class="cont"> LAYER 1 CONTENTS
<P>SOME TEXT<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT<P>Some Text<P>End
</div>

<P><a href="#null" onclick="back_to_top('One')">Click Here to Scroll <b>Layer 1</b> Back to the Top</a>

<div id="Two" class="cont2"> LAYER 2 CONTENTS
<P>SOME TEXT<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT<P>Some Text<P>
</div>
<P><a href="#null" onclick="back_to_top('Two')">Click Here to Scroll <b>Layer 2</b> Back to the Top</a>

</BODY>
</HTML>
Jerome
01-05-2003, 05:30 PM
Thanks!
With a little rework I can implement this.
Have a nice week-end,
Jerome