[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1727
  • Last Modified:

JS jump to anchor

I have a search results page that I need to jump to an anchor called "results" when it loads.  I cannot use the #results in the URL, and I cannot use a body onload func.  it needs to be a standalone func with the anchor "results" built in.
0
bjv211
Asked:
bjv211
  • 4
  • 3
  • 2
1 Solution
 
RoonaanCommented:
Do you have a form-field (textfield/radio/checkbox/textarea) somewhere near #results? Then you could use: document.forms.formName.fieldName.focus();

-r-
0
 
bjv211Author Commented:
ok so if i put one in;  <form name="resultsanchor"><input type="text" name="results"></form>  how would i use this keeping in my my original criteria.
0
 
RoonaanCommented:
<script type="text/javascript">
setTimeout("document.forms.resultsanchor.results.focus()",10);
</script>

-r-
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
sam2912Commented:
You don't need a form and a text field.

Solution:

1) Put this script into the head of the page:
<script type="text/javascript"><!--
function findPosX(obj) {
      var curleft = 0;
      if (obj.offsetParent) {
            while (obj.offsetParent) {
                  curleft += obj.offsetLeft
                  obj = obj.offsetParent;
            }
      }
      else if (obj.x)
            curleft += obj.x;
      return curleft;
}
function findPosY(obj) {
      var curtop = 0;
      if (obj.offsetParent) {
            while (obj.offsetParent) {
                  curtop += obj.offsetTop
                  obj = obj.offsetParent;
            }
      }
      else if (obj.y)
            curtop += obj.y;
      return curtop;
}
function goto(objID) {
      window.scrollTo(findPosX(document.getElementById(objID)),findPosY(document.getElementById(objID)));
}
//--></script>

2) Modify the body onload function:
<body onload="goto('bookmark');">

3) Insert the bookmark wherever you want:
<a id="bookmark"></a>
0
 
bjv211Author Commented:
quoted from above  >>>and I cannot use a body onload func.
could i somehow use the bookmark varible in the function so it would automatically do it when the page loads rather than call it in the body tag.
0
 
bjv211Author Commented:
Roonaan, this doesn't mimic an anchor, it simply switches focus to the form field.
0
 
bjv211Author Commented:
sam2912, i got a workaround for the body onload tag, it works great!! thanks :)
0
 
sam2912Commented:
You also can use the id attribute on any tag, and the script will jump to it.

If you don't want onload, you can paste this just before the body closing tag </body> :
<script type="text/javascript"><!--
goto("bookmark");
//--></script>
0
 
sam2912Commented:
Thanks for the points, and have a nice day!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now