scrolling within div

stan · Jan 14, 2007

This is a follow-up to an earlier posting - this time with sample code.

In the code below, the jump within the div causes movement within the
div and as well withing the page as a whole. I am looking for a way to
restrict movement, triggered by the jump, to the area within the div
only.

Here is the code.

<html>
<head>
<style type="text/css">
..sectionhead {
text-align: left;
background: #EBEBEB;
height: 7.25em;
width: 100%;
border-style:ridge;
border-width:thin;
border-color:grey;
float: left;
margin-left:0px;
margin-right:0px;
overflow-y: auto;
color: black;
}

</style>
</head>
<body>
blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
<div class="sectionhead">
<a href="#test">go to "test"</a><br>
text in div<br>text in div<br>text in div<br>text in div<br>
<a name="test"></a>
more text in div<br>more text in div<br>more text in div<br>
more text in div<br>more text in div<br>more text in div<br>
blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
</div>
blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>blah<br>
</html>

ASM · Jan 14, 2007

(e-mail address removed) a écrit :

This is a follow-up to an earlier posting - this time with sample code.

In the code below, the jump within the div causes movement within the
div and as well withing the page as a whole. I am looking for a way to
restrict movement, triggered by the jump, to the area within the div
only.

Do not understand ... and if 'test' is outside of viewport ?
You have to scroll the page before to reach it, no ?

<html>
<head>
<body id="cap">
<a href="#test" onclick="setTimeout('self.location=\'#cap\'',0);">
reach test
</a>
<div style="height: 400px; border:1px solid blue">
filling up
</div>
<div style="height: 6em; overflow: auto">
<p style="height:150px; border:1px solid red">
some text
</p>
<h2 id="test"> place to reach</h2>
<p style="height:150px; border:1px solid red">
some more text
</p>
</div>
<div style="height: 400px; border:1px solid blue">
filling up
</div>
</body>
</html>

Works with my FF, Safari, Opera

stan · Jan 14, 2007

Thanks for your reply, but in the test example I provided, both the
"from" and the
"to" are within the div.

To be clear, I am looking at a situation where:

1) both the "from" and the "to" are within the div
2) there is enough content on the page istelf to require page scrolling
Note: In the code provided there is enough content provided to require
page scrolling on a 17" screen at 1024 X 768.

Stan

ASM · Jan 15, 2007

(e-mail address removed) a écrit :

Thanks for your reply, but in the test example I provided, both the
"from" and the
"to" are within the div.

To be clear, I am looking at a situation where:

1) both the "from" and the "to" are within the div

Not a problem

2) there is enough content on the page istelf to require page scrolling
Yeap

Note: In the code provided there is enough content provided to require
page scrolling on a 17" screen at 1024 X 768.

That's right, and ?

Perhaps could you try to see if page was scrolled before to jump
then after the jump re-scroll it to its previous position ?

<script type="text/javascript">
function rePlace() {
var posy = window.pageYOffset? window.pageYOffset : document.body.scrollTop;
setTimeout('scrollTo(0,'+posy+')',0);
}
</script>

<a href="#test" onclick="rePlace()">go to "test"</a>

In your CSS, as overflow-y:auto; isn't recognize in all browsers
prefer overflow: auto;

stan · Jan 15, 2007

Thanks for the suggestion. I tried it but it is quite a jerky
operation, scrolling one way and then back again. It woulld be nice to
find a better way if possible.

ASM · Jan 15, 2007

(e-mail address removed) a écrit :

Thanks for the suggestion. I tried it but it is quite a jerky
operation, scrolling one way and then back again. It woulld be nice to
find a better way if possible.

It is quite the same feature as given previously.

Other way could be to scroll the overflow, if you know exactly how much
pixels to slide down.
Personally I can't calculate this, because user can ask to its browser
to display text bigger than original size.

scrolling within div triggered by jump:restrict to div	0	Jan 18, 2007
Help with code	0	Jun 12, 2022
Help with my responsive home page	2	Dec 14, 2022
Aligned to the left	3	Apr 19, 2023
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022
I dont get this. Please help me!!	2	Jan 24, 2023
Wrong Coding	3	Apr 19, 2023

scrolling within div

stan

ASM

stan

ASM

stan

ASM

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads