How to get AJAX to load page at top of div

Question

My site contains a div where different pages are loaded using ajax. On a button click, a new page can be loaded and the pages always appear in that div.

The problem is if I go to a new page and scroll down without scrolling back to the top of that page, new pages will load at the same position below the top of the page, not at the top of the page. I want to force all pages to load at the top.

Here are the relevant page elements:

The div (where the page content goes):

<div class="main_text">
<div id="C2"><span style="color:black">MTX</span></div>
</div>

The button:

<div class="C1"><br><button class="button_01" id="btn07" onclick="HideDropdown(); ShowAjax(7);">Page 7</button></div>

The AJAX code:

<script>
function ShowPage(type) {
    var filename = "page_" + type + ".htm"
    $( "#C2" ).hide().load( filename ).fadeIn(500);
}
</script>

The most important line is:

$( "#C2" ).hide().load( filename ).fadeIn(500);

At the top of each page I have:

<div id="bkmk00"></div>

I want to open each page at the top of the page (at "bkmk00). I saw a post that said I could add an id name and it would load the page at that ID:

$( "#C2" ).hide().load( filename "bkmk00" ).fadeIn(500);

but with that, it doesn't load anything. Instead, the Firefox 67 dev console says "SyntaxError: missing ) after argument list" for this ajax function call, and it points to character 37 which is right after filename. That looks like I can't add the second parameter "bkmk00."

My question is, how can I get the page to load at "bkmk00" at the top of the page to be loaded?

Answer 1

<script>
function ShowPage(type) {
    var filename = "page_" + type + ".htm"
    $( "#C2" ).hide().load( filename ).fadeIn(500);
}
</script>

You are close but not quite, load function has 2 parameters, input file and a function callback:

var filename = "page_" + type + ".htm"
$( "#C2" ).hide()
$( "#bkmk00" ).load(filename, function(){
    $( "#bkmk00" ).fadeIn(500);
});