<div>
    <p><a href="#">it jumps</a></p>
    <p><a href="#">it jumps</a></p>
    <p><a href="#">it jumps</a></p>
    <p><a href="#">it jumps</a></p>
    <p><a href="javascript:void(0);" id="jsSolution">no jumps - jsSolution</a></p>
    <p><a href="#" id="jqSolution">no jumps - jqSolution</a></p>
    <p><a href="#!">no jumps - html Solution</a></p>
    <p><a href="#" id="problem">how to prevent this from jumping - javascript solution in the add() function</a></p>
</div>

$(function(){
    function inner(){


        //prevent from scrolling to top here - solution is needed here;

        return 4;
    }
    function add() {
        alert('how to prevent jumping to top in the add function');
        var counter = 0;
        var res=inner();
        alert(res);//4
        //some code goes here
        //and here
        //this doesn't work e.preventDefault();
        return counter;
    }
    $('#jqSolution').click(function(e) {
     // do something fancy
     return false; // prevent default click action from happening!
     e.preventDefault(); // same thing as above
    });
    $('#problem').click(function(e) {
         add();
    });
});

div{
border:1px solid red;
    width:200px;
}
p{
    padding:50px;
}