?
Solved

Scrolling to a particular point in a page

Posted on 2006-04-10
21
Medium Priority
?
1,062 Views
Last Modified: 2012-06-22
I want to scroll to a particular point in a page when the page has loaded, how can this be done?

I have used focus() and scrollToView but these do not wor
0
Comment
Question by:inzaghi
  • 9
  • 8
  • 2
  • +1
21 Comments
 
LVL 49

Expert Comment

by:Roonaan
ID: 16416563
window.scrollTo(x,y);

-r-
0
 
LVL 49

Accepted Solution

by:
Roonaan earned 1000 total points
ID: 16416567
Or use an anchor:

<a name="myAnchor"></a>

And call the page like:
http://mysite.com/mypage.html#myAnchor

-r-
0
 
LVL 9

Expert Comment

by:smaccari
ID: 16416572
Again, the scrollIntoView should work.

By the way, you can, as you said in your last question, add an anchor, and call the page by adding #anchorName at the end of your URL.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:inzaghi
ID: 16416755
I cannot use anchors as I am using portlet techology, can I use javascript to scroll to a postion in a page where I set an anchor?
0
 
LVL 9

Expert Comment

by:smaccari
ID: 16416790
Yes, with the still scrollIntoView method...

I really do not understand why this method is not working in your code.
Could you post the code part where you tried it?
0
 

Author Comment

by:inzaghi
ID: 16416806
             <script language="JavaScript">
              <!--
                document.forms["thisForm"].elements["descriptionId<%=rowNo%>"].scrollIntoView();
       -->
      </script>

I have added alerts before and after the code and they are getting executed
0
 
LVL 9

Expert Comment

by:smaccari
ID: 16416826
What do you get?
An error? Nothing happens? It scrolls but not far enough?
Is this JS code contained in a loop?
0
 

Author Comment

by:inzaghi
ID: 16416879
This code is contained within a loop, what I get is no scrolling whatsoever
0
 

Author Comment

by:inzaghi
ID: 16416892
This only gets executed once
0
 

Author Comment

by:inzaghi
ID: 16416899
Is there anyway where we can determine the x,y co-ordinates and use the window.scrolling method to scroll to that particular point?
0
 
LVL 9

Expert Comment

by:smaccari
ID: 16416967
Put the code out of the loop (after it).
If not working, please post your generated code (source code in your browser).
0
 

Author Comment

by:inzaghi
ID: 16417000
Can not be done as this needs to be within the loop. This code is added within a included jsp
0
 

Author Comment

by:inzaghi
ID: 16417042
What about scrolling to an x,y position?
0
 
LVL 9

Expert Comment

by:smaccari
ID: 16417103
Then put it only for your last row (be sure to write this code only once).
Again, can you post the generated code of you page?

Scrolling to x,y is another solution, but a bit more complex (as you have to find position of your element), and there is chance that the problem you have will make this not working better.
0
 
LVL 11

Expert Comment

by:mvan01
ID: 16417128
I believe that there's a method to find the x,y coordinates of any element on the page ...

Peace and joy.  mvan
0
 
LVL 9

Assisted Solution

by:smaccari
smaccari earned 600 total points
ID: 16417227
Try this:

<script>
function customAnchor()
{

}
</script>
<body onload="customAnchor()">
...

Then in your include, after the last line:

<script language="JavaScript">
function customAnchor()
{
   document.forms["thisForm"].elements["descriptionId<%=rowNo%>"].scrollIntoView();
 }
 </script>
0
 

Author Comment

by:inzaghi
ID: 16417293
mvan

how can I find the x,y corordinates and scroll to that point?
0
 
LVL 9

Expert Comment

by:smaccari
ID: 16417328
Here is the function i use to find the position of an HTML element:

function findPosition( obj ) {
  if( obj.offsetParent ) {
    for( var posX = 0, posY = 0; obj.offsetParent; obj = obj.offsetParent ) {
      posX += obj.offsetLeft;
      posY += obj.offsetTop;
    }
    return [ posX, posY ];
  } else {
    return [ obj.x, obj.y ];
  }
}

This will retrurn an array, with x position in first place and y in second.
0
 

Author Comment

by:inzaghi
ID: 16417504
How do I scroll to that point returned by your function?
0
 
LVL 9

Expert Comment

by:smaccari
ID: 16417571

var x = findPosition(document.forms['thisForm'].elements['descriptionId<%=rowNo%>'])[0];
var y = findPosition(document.forms['thisForm'].elements['descriptionId<%=rowNo%>'])[1];

window.scrollTo(x,y);
0
 
LVL 11

Assisted Solution

by:mvan01
mvan01 earned 400 total points
ID: 16417781
Hi inzaghi,

To answer your previous question, as smaccari says, it is complicated.  My understanding is that MS-IE and Mozilla browsers behave differently.

Mozilla has .pageX and .pageY properties, while in IE, you have to trace back through the containers in which an object exists, using .offsetX and .offsetY properties (as smaccari shows above), in order to establish the absolute position.

then window.scrollTo(x,y);

Peace and joy.  mvan
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question