JS function scrollIntoView

Test JS navigation: document.getElementById(eltId).scrollIntoView(true);

by roge roge

HTML

<h1> Test JS scrollIntoView</h1>

<h4 id="10"> ELEMENT 10 </h4>
<p> hjdh d dio hbvcwxvyuizab wdbkhvwdpofu gfdb erpot kdsqkmùj fp</p>
<p> djh sh mdsfhmdf uie hfd gmjfd gfo gfjghhdmqshsfmfddqhf mfkhg</p>

<a href="#100">Afficher élément HREF #100</a><br>

<a href="" onclick="ShowElement('100');">Afficher élément 100</a><br>

<input type="button" value="Afficher le paragraphe 100" onclick="ShowElement('100');">

<DIV class="Link" onclick="showIt('100');"> DIV ===> 100 </DIV>
<SPAN class="Link" onclick="showIt('100');" title="Goto 100"> SPAN ===> 100 </SPAN>

<p> jdslkj sjd ldj e rv bvcxov fdbnv bn b cvlv cvljcwxvvv</p>
<p> hjdh d dio hbvcwxvyuizab wdbkhvwdpofu gfdb erpot kdsqkmùj fp</p>
<p> djh sh mdsfhmdf uie hfd gmjfd gfo gfjghhdmqshsfmfddqhf mfkhg</p>
<h4 id="20"> ELEMENT 20 </h4>
<p> jdslkj sjd ldj e rv bvcxov fdbnv bn b cvlv cvljcwxvvv</p>
<p>qds j lkdqj fùqljfd jùlsd fùj ùi djsqfj ùqdsf hjfùhdqsf</p>
<p> jdslkj sjd ldj e rv bvcxov fdbnv bn b cvlv cvljcwxvvv</p>
<p> hjdh d dio hbvcwxvyuizab wdbkhvwdpofu gfdb erpot kdsqkmùj fp</p>
<h4 id="30"> ELEMENT 30 </h4>
<p>qds j lkdqj fùqljfd jùlsd fùj ùi djsqfj ùqdsf hjfùhdqsf</p>
<p> jdslkj sjd ldj e rv bvcxov fdbnv bn b cvlv cvljcwxvvv</p>
<p> hjdh d dio hbvcwxvyuizab wdbkhvwdpofu gfdb erpot kdsqkmùj fp</p>
<h4 id="40"> ELEMENT 40 </h4>
<p> jfdf kj fddsqùf jdlùk dfjd ùfqjsfù fjf dqsfjùqfjds fhqùf fh</p>
<p> hjdh d dio hbvcwxvyuizab wdbkhvwdpofu gfdb erpot kdsqkmùj fp</p>
<p> djh sh mdsfhmdf uie hfd gmjfd gfo gfjghhdmqshsfmfddqhf mfkhg</p>
<p> jfdf kj fddsqùf jdlùk dfjd ùfqjsfù fjf dqsfjùqfjds fhqùf fh</p>
<p> qdsfkjldqs fdùf jhfds ihjdsfqhmkf hfm dqsgmudqfg mui</p>
<h4 id="50"> ELEMENT 50 </h4>
<p>qds j lkdqj fùqljfd jùlsd fùj ùi djsqfj ùqdsf hjfùhdqsf</p>
<p>qds j lkdqj fùqljfd jùlsd fùj ùi djsqfj ùqdsf hjfùhdqsf</p>
<p> jdslkj sjd ldj e rv bvcxov fdbnv bn b cvlv cvljcwxvvv</p>
<p> hjdh d dio hbvcwxvyuizab wdbkhvwdpofu gfdb erpot kdsqkmùj fp</p>
<h4 id="60"> ELEMENT 60 </h4>
<p> djh sh mdsfhmdf uie hfd gmjfd gfo...

CSS

.Link {
		font: 10pt monospace, Consolas, sans-serif,Arial,Verdana;
		color:#282;
		background-color:#ccc;
      border-radius : 4px;
      padding: 6px;
      margin: 10px;
	}

JavaScript

function ShowElement(eltId) {
   document.getElementById(eltId).scrollIntoView(true);
   //window.scrollBy(100, 0);
   //var e = document.getElementById(eltId);
   //e.scrollIntoView();
   //var target = document.getElementById(eltId);
   //target.parentNode.scrollTop = target.offsetTop;
   window.location.href = window.location.href+'#'+eltId; 
   return false;
}
function showIt(elID) {
    var el = document.getElementById(elID);
    el.scrollIntoView(true);
    return false;
}