Overriding/replacing a jquery click function - html

Question

Forgive me if this is an obvious question.
I'm working on a page with a script I can't remove or alter. A button is clicked, which loads some items onto the page with an ajax request, and then triggers an annoying scrolljacking animation for the page.
The goal: I still want the items to load when the button is clicked, but I don't want the scroll animation.
I'm able to add my own custom js to the page (below where the default script is added). How do I interrupt or override the original script to remove the scrolling behaviour?
Here's a simplified example.
.group{
background: cyan;
height:400px;
width:400px;
margin:10px
}
.load-more{
background:#88f;
width:360px;
text-align:center;
margin:10px;
padding:20px;
cursor:pointer;
}
<!-- markup -->
<div class="groups-listing">
<div class="group"></div>
</div>
<div class="load-more">Load more</div>
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(".load-more").click(function () {
//loading another item
$(".groups-listing").append('<div class="group"></div>');
//annoying animated scrolling
$("html, body").animate(
{
scrollTop: $(".groups-listing .group").last().offset().top
},2000
);
});
</script>
<script>
// custom js, override must go here.
</script>
The actual problem can be found here: https://obsu.unionclouduat.org/groups
I think my simplified example is analagous, but I'm not 100% sure.

Answer 1

You can try to unbind() and reasign the event ?
// custom js, override must go here.
$(".load-more").unbind().click(function () {
//loading another item
$(".groups-listing").append('<div class="group"></div>');
});