Why a web Page associated with a JS moves to the top when JS is activated ?

[pankajit09]

I have a unique question .

Suppose we attach a Javascript to a link.
When we click the link a JS function is called and the body of the web page moves to the top if we had scrolled down the page.

I want to stop the web page from going to the top.

How to do this ?

[pankajit09]

Please anyone .

[acoder]

Post your code which does this, so that it can be altered.

One more thing: please do not bump up your thread if you have nothing new to say. Different time zones mean that responses cannot be immediate. If it's been 24 hours, then you might consider doing that, perhaps with a more detailed explanation including code (then I won't mind!)

[pankajit09]

This is my code -->

<script type="text/javascript" src="/ps/js/prototype.js"></script>
<script language="Javascript">
    function getHTML(num) {
        if(num == undefined) {
            var num = document.getElementById('refid').value;
        }
        var num = num;
        var url = '/cgi-bin/ps/srch.cgi';
        var pars = 'num='+num+'&act=showattachedfilesection';
        var myAjax = new Ajax.Updater( {success: 'placeholder'}, url, { method: 'get', parameters: pars, onFailure: reportError });
    }
 
    function getSrchResults() {
        document.getElementById('systemWorking').style.visibility = 'visible';
        var textbox = document.getElementById('data').value;
        var ex = document.getElementById('exact');
        if(ex.checked) {
            var exact = 1;
        }
        var a = document.getElementById('and');
        if(a.checked) {
            var and = 1;
        }
        var se = document.getElementById('sequence');
        if(se.checked) {
            var seq = 1;
        }
        var url = '/cgi-bin/ps/srch.cgi';
        var pars = 'data='+textbox+'&exact='+exact+'&and='+and+'&seq='+seq+'&act=search';
        var myAjax = new Ajax.Updater( {success: 'searchplaceholder'}, url, { method: 'get', parameters: pars,onFailure: reportError });
    }
 
    function reportError(request) {
        alert('Sorry. There was an error.');
    }
 
    var myGlobalHandlers = {
        onCreate: function(){
            Element.show('systemWorking');
        },
        onComplete: function() {
            if(Ajax.activeRequestCount == 0){
                Element.hide('systemWorking');
            }
        }
    };
 
    Ajax.Responders.register(myGlobalHandlers);
</script>
 
<table cellpadding="0" cellspacing="0" width="73%" align="center">
<tr><td class="punchintitle" colspan="9">Search Database</td></tr>
<tr>
<td class="report" align="right" width="20%">Keywords&nbsp;</td>
<td class="report" align="left" width="40%"><input type="textbox" id="data" size="40" maxlength="200"/></td>
<td class="report" align="right">Exact</td>
<td class="report"><input type="checkbox" id="exact"/></td>
<td class="report" align="right">AND</td>
<td class="report"><input type="checkbox" id="and"/></td>
<td class="report" align="right" width="10%">Sequence</td>
<td class="report"><input type="checkbox" id="sequence"/></td>
<td class="report" align="right"><a href="#" onClick="getSrchResults();">Search</a></td>
<td><div id='systemWorking' align="center" style="visibility:hidden;"><img src='/ps/imgs/animated-circle-ball.gif'></div></td>
</tr>
</table>
 
<br/>
<div id="srchplaceholder"></div>
 
<br/><br/>
<div id="placeholder"></div>

I am using Ajax to replace the "placeholders" present in the DIVs above .
Whenever I click on the Search link the page goes up.
I want the page to be at the current place .

The above code is present in a HTML template which gets values from a Perl CGI file.

[pankajit09]

Also I don't think there is any need of code because this is a general phenomenon.

[pankajit09]

I got the solution using anchors -->

<a href="#bottomanchor">Go to Bottom</a>

<a name="bottomanchor"></a>

[acoder]

Glad you got your problem solved and thank you for posting and sharing your solution.

[iam_clint]

<a href="javascript: void(0)" onclick="whatever">

[acoder]

<a href="javascript: void(0)" onclick="whatever">

Yes, looking back at the code, this is a much better solution. Using the anchors will achieve what you want but it's still moving to somewhere.
Change

<a href="#" onClick="getSrchResults();">Search</a>

to

<a href="javascript:void(0)" onClick="getSrchResults();">Search</a>

javascript:void(0) causes a dead link.

[pankajit09]

ya you all are right .

But I want to move down so I used the anchors.

If I have to remain in that position then I will use your code.

Thanks for the code.