Preventing anchors from scrolling to top

You may experience when clicking an anchor (which may be styled as a button) that the web page scrolls to the top which may be an un-desirable behaviour for the end user who is using the page.

For example, assume that we have the following simple page.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>test</title>
  </style>
</head>
<body>
    <p>Some elements here that cause the page to scroll</p>
    
    <a id="save" href="#">Do some Ajax operation</a>
    
    <script>
        document.getElementById('save').onclick = function(event) {
            alert("do some Ajax operation");
        };
    </script>

</body>
</html>

In order to stop this annoying behavior, you need to prevent the default behavior of the anchor by using event.preventDetfault() or event.returnValue = false for the browsers that does not support preventDefault() as follows:

...
<script>
    document.getElementById('save').onclick = function(event) {
        event.preventDefault ? event.preventDefault() : event.returnValue = false;
            
        alert("do some Ajax operation");
            
        return false;
    };
</script>
...

This is all about the trick.