Scrolling to a particular point in a page

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
inzaghiAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RoonaanCommented:
window.scrollTo(x,y);

-r-
0
RoonaanCommented:
Or use an anchor:

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

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

-r-
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
smaccariCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

inzaghiAuthor Commented:
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
smaccariCommented:
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
inzaghiAuthor Commented:
             <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
smaccariCommented:
What do you get?
An error? Nothing happens? It scrolls but not far enough?
Is this JS code contained in a loop?
0
inzaghiAuthor Commented:
This code is contained within a loop, what I get is no scrolling whatsoever
0
inzaghiAuthor Commented:
This only gets executed once
0
inzaghiAuthor Commented:
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
smaccariCommented:
Put the code out of the loop (after it).
If not working, please post your generated code (source code in your browser).
0
inzaghiAuthor Commented:
Can not be done as this needs to be within the loop. This code is added within a included jsp
0
inzaghiAuthor Commented:
What about scrolling to an x,y position?
0
smaccariCommented:
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
mvan01Commented:
I believe that there's a method to find the x,y coordinates of any element on the page ...

Peace and joy.  mvan
0
smaccariCommented:
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
inzaghiAuthor Commented:
mvan

how can I find the x,y corordinates and scroll to that point?
0
smaccariCommented:
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
inzaghiAuthor Commented:
How do I scroll to that point returned by your function?
0
smaccariCommented:

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
mvan01Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.