Clicking on a delete icon in a html page is scrolling to the top of the page - Knockout.js

I am a novice at knockout.js. I have a code which I am trying to debug. The issue I am facing in very new to me. A delete button is placed in a div and the purpose of it is to delete the respective section. I am observing a strange thing. If the page is at 100% zoom and if the page has 10 sections. Say 3 sections are visible and 7 sections are not. the section which is hidden from the user view is not getting deleted upon click of the delete button. Instead, on click of the delete button in these 7 sections, the focus reaches to the top of the page.

If I decrease the zoom to say 60%, 7 sections are visible on the page and 3 are hidden. Now I am able to delete 7 sections without any issue. But delete is not working on the 3 which are not visible to the user. As soon as I delete a couple of section from the top, then when the last 3 sections are visible to the user, then the user is able to delete these sections too. I don't understand what could be the issue. The below code has only on one such block.

<div class="well border-editable field-container" data-bind="foreach: fields">
<!-- ko if: !$parent.isApproved && !$parents[1].isCloned -->
    <div class="hover-icon field" data-bind="drag: $parent.reorderField">
        <div class="well well-xs border-bar field-body clearfix" data-bind="event: {mouseleave: closeTooltip}">
            <div class="field-operation" data-bind="visible: id != $parent.editingField().id">
                <span class="field-operation-item">
                    <!-- ko if: $parents[1].status != 'distributed' -->
                    <!-- ko if: type() != 'outcome' && type() != 'cm' && type() != 'am' && type() != 'al'-->
                    <a href="#" class="tooltip_trigger" data-bind="sure: $parent.removeField, btnText: 'Delete', tipText: 'Are you sure?'" data-placement="top" title="Delete" tabindex="0">
                        <i class="icon icon-trash-empty"></i>
                    </a>
                    <!-- /ko -->
                    <!-- ko if: (type() == 'outcome' && !$parents[1].cmField()) || 
                                (type() == 'cm' && !$parents[1].amField()) || 
                                (type() == 'am' && !$parents[1].afField()) ||
                                (type() == 'al' && !$parents[1].alfField()) --><!-- /ko -->
                    <!-- ko if: type() == 'outcome' && $parents[1].cmField() --><!-- /ko -->    
                    <!-- ko if: type() == 'cm' && $parents[1].amField() --><!-- /ko -->    
                    <!-- ko if: type() == 'am' && $parents[1].afField()  --><!-- /ko -->  
                    <!-- ko if: type() == 'al' && $parents[1].alfField()  --><!-- /ko --> 
                    <!-- /ko -->
                    <!-- ko if: $parents[1].status == 'distributed' --><!-- /ko -->
                </span>
            </div>
            <div data-bind="template: { name: 'field-' + type(), data: $data }">
                <!-- ko if: id !== $parents[1].editingField().id -->
                <div class="form-horizontal">
                    <div class="form-group">
                        <div class="col-md-12">
                            <label class="text-primary" data-bind="text: label">Number</label>
                            <p class="help-block" data-bind="text: description"></p>
                        </div>
                        <div class="col-md-3">
                            <div class="fake-text" data-bind="text: value"></div>
                        </div>
                    </div>
                </div>
            <!-- /ko -->
            <!-- ko if: id === $parents[1].editingField().id --><!-- /ko -->
            </div>
        </div>
    </div>
    <!-- /ko -->
<!-- ko if: $parent.isApproved || $parents[1].isCloned --><!-- /ko -->

Here is the javascript code: ( Let me know if you need any other info )

    function removeField () {
        var activeSection = _getActiveSection();
        activeSection.removeField(removeFieldModel);
    }
    function _getActiveSection () {
        var activeSectionId = self.activeSectionId();
        var sections = self.displaySections();
        return  _.find(sections, function (section) {
            return section.id == activeSectionId;
        }) || sections[0] || {};
    }
    self.displaySections = ko.pureComputed(function () {
        return _.union(ko.unwrap(self.linkedSections), ko.unwrap(self.sections));
    });

I am not sure what extra code would be needed for you guys to help me debug this. Let me know if you need any other information.

Here is a video demo of what I am trying to explain. VIDEO DEMO LINK

Thanks.

from Clicking on a delete icon in a html page is scrolling to the top of the page - Knockout.js