function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
praiprai 

scroll to top

I have created a Big VF page.
i want to add "Back to Top" link at the bottom of my VF page which, once you clicked  it will take them back to top of page and cursor point to specific field.

I wrote the code:
<div align="right"> <a href="#" ID="#backToTop"> Back To Top</a> </div>
but this is returing back to top of page. but i dont know how to set the cursor position.

Please help me to get this.
Thanks.


Best Answer chosen by prai
Virendra ChouhanVirendra Chouhan
Hi Prai,

You have to use Script for that senario.
Let, in mine code there is 4 inputText component and i want to focuse on particular component (3rd one in them) after clicking Back to Top.
And on page load i want to focus on 1st inuptText.
so i write this code

<script>
   window.onload = setFocus1;
    function setFocus1() {
              document.getElementById('{!$Component.MyForm.myBlock.myBlocksection.Test1}').focus();
        }
          function setFocus() {
               document.getElementById('{!$Component.MyForm.myBlock.myBlocksection.Test3}').focus();
        }
      
</script>

  <apex:form id="MyForm">
 
      <apex:pageBlock id="myBlock">
          <apex:pageBlockSection columns="1" id="myBlocksection" >
              <apex:inputText id="Test1" label="Input 1"/>
             <apex:inputText id="Test2" label="Input 2"/>
              <apex:inputText id="Test3" label="Input 3"/>
               <apex:inputText id="Test4" label="Input 4"/>
          
                   
          </Apex:pageBlockSection>
          <div align="right"> <a href="#" ID="#backToTop" onclick="setFocus()"> Back To Top</a> </div>
      </apex:pageBlock>
  </apex:form>
Hope this will help you!

Regards
Virendra

All Answers

Virendra ChouhanVirendra Chouhan
Hi Prai,

You have to use Script for that senario.
Let, in mine code there is 4 inputText component and i want to focuse on particular component (3rd one in them) after clicking Back to Top.
And on page load i want to focus on 1st inuptText.
so i write this code

<script>
   window.onload = setFocus1;
    function setFocus1() {
              document.getElementById('{!$Component.MyForm.myBlock.myBlocksection.Test1}').focus();
        }
          function setFocus() {
               document.getElementById('{!$Component.MyForm.myBlock.myBlocksection.Test3}').focus();
        }
      
</script>

  <apex:form id="MyForm">
 
      <apex:pageBlock id="myBlock">
          <apex:pageBlockSection columns="1" id="myBlocksection" >
              <apex:inputText id="Test1" label="Input 1"/>
             <apex:inputText id="Test2" label="Input 2"/>
              <apex:inputText id="Test3" label="Input 3"/>
               <apex:inputText id="Test4" label="Input 4"/>
          
                   
          </Apex:pageBlockSection>
          <div align="right"> <a href="#" ID="#backToTop" onclick="setFocus()"> Back To Top</a> </div>
      </apex:pageBlock>
  </apex:form>
Hope this will help you!

Regards
Virendra

This was selected as the best answer
Alex TennantAlex Tennant
You will need to use a little bit of JavaScript to achieve this. Give your input field an id, and then the following should work.

function setFocus()
{
    var input = document.getElementById ('myInputId');
    input.focus ();
}

If it does not work then you may need to give all of the parent components of your input field an Id and then use the following instead:

function setFocus()
{
    var input = document.getElementById ('{!$Component.grandparentId.parentId.myInputId}');
    input.focus ();
}

Remember to add the setFocus function to the onclick of your anchor tag.

More information on using $Component can be found in the documentation (https://www.salesforce.com/us/developer/docs/pages/Content/pages_best_practices_accessing_id.htm).
Virendra ChouhanVirendra Chouhan
Hi Alex,

But If you dont use $COmponent and the full component hierarchy then its not work.
Alex TennantAlex Tennant
If he is using a standard html input tag rather than an apex:input component then the $Component method will not work. Without knowing which he is using I felt it was best to provide both solutions.
Virendra ChouhanVirendra Chouhan
Hi Alex

i apologies
you are right ! if he use Html tag then he can use without $Component. 

Regards
Virendra
Grazitti TeamGrazitti Team
You can find tons of cool jquery plugins to achive that. Here is one good plugin with code you can use:
http://www.jqueryscript.net/other/Simple-Back-To-Top-Link.html
praiprai
Thanks Virendra and Alex for giving the solution.