创建跳转菜单以跳转到不同的类别而不拆分MySQL查询

I have a simple MySQL table that stores four fields - CATEGORY, TITLE, DESCRIPTION, IMAGE as well as a unique ID for each row.

I use ORDER BY CATEGORY to display all of them on the page through one query.

SELECT
RESOLUTIONS.CATEGORY,
RESOLUTIONS.ID,
RESOLUTIONS.TITLE,
RESOLUTIONS.DESCRIPTION,
RESOLUTIONS.IMAGE
FROM
RESOLUTIONS
ORDER BY
RESOLUTIONS.CATEGORY 

I want to create a jump menu that will jump to the first row of each category on the page. Is this possible using php? I know how to create a jump menu that jumps to an ID anchor of a div, but how can I make a unique identifier (that I can jump to) inside the repeat region?

Here is the repeat code I have now...

<?php
while(!$DETAILS->atEnd()) {
?>   
 <div class="row g-my-10 g-color-black">
    <?php if($DETAILS->getColumnVal("IMAGE")!= "") { ?>
    <div class="col-md-9">
        <h2><?php echo($DETAILS->getColumnVal("TITLE")); ?></h2>
        <?php echo($DETAILS->getColumnVal("DESCRIPTION")); ?>
    </div>
    <div class="col-md-3"><img src="images/<?php echo($DETAILS->getColumnVal("IMAGE")); ?>" class="img-fluid"></div>
    <? } else { ?>
    <div class="col-md-12">
        <h2><?php echo($DETAILS->getColumnVal("TITLE")); ?></h2>
        <?php echo($DETAILS->getColumnVal("DESCRIPTION")); ?>
    </div>
    <?php } ?>
  </div>

 <?php

    $DETAILS->moveNext();
}
$DETAILS->moveFirst(); //return RS to first record
?>

In each iteration check if the category is different than the one before and create an anchor.

<?php
// set any initial value that does not match an empty category (if you have them)
$lastCategory = false;

while(!$DETAILS->atEnd()) {

 <div class="row g-my-10 g-color-black">
<?php
    // this category is different than the last: create anchor
    if ($lastCategory !== $DETAILS->getColumnVal("CATEGORY")) {
        echo '<a name="category-' . $DETAILS->getColumnVal("CATEGORY") . '"></a>';
        // set the compare-value to the current category
        $lastCategory = $DETAILS->getColumnVal("CATEGORY");
    }
?>
    <?php if($DETAILS->getColumnVal("IMAGE")!= "") { ?>
    <div class="col-md-9">
        <h2><?php echo($DETAILS->getColumnVal("TITLE")); ?></h2>
        <?php echo($DETAILS->getColumnVal("DESCRIPTION")); ?>
    </div>
    <div class="col-md-3"><img src="images/<?php echo($DETAILS->getColumnVal("IMAGE")); ?>" class="img-fluid"></div>
    <? } else { ?>
    <div class="col-md-12">
        <h2><?php echo($DETAILS->getColumnVal("TITLE")); ?></h2>
        <?php echo($DETAILS->getColumnVal("DESCRIPTION")); ?>
    </div>
    <?php } ?>
  </div>

 <?php

    $DETAILS->moveNext();
}
$DETAILS->moveFirst(); //return RS to first record
?>

Note: You might have to put the anchor within the column or even the <h2>, depending on your grid system (is that bootstrap?). You maybe also want to refactor the generation of the title/description column, so you don't repeat yourself. Something like

<?php
    if ($DETAILS->getColumnVal("IMAGE")!= "") {
        $cols = '9';
    } else {
        $cols = '12';
    }
?>
<div class="col-md-<?php echo $cols ?>">
    <h2><?php echo($DETAILS->getColumnVal("TITLE")); ?></h2>
    <?php echo($DETAILS->getColumnVal("DESCRIPTION")); ?>
</div>
<?php
    if ($DETAILS->getColumnVal("IMAGE")!= "") {
?>
<div class="col-md-3"><img src="images/<?php echo($DETAILS->getColumnVal("IMAGE")); ?>" class="img-fluid"></div>
<?php
    }
?>

Also note that according to PSR-1 you should use either <?php or the echo shortcut <?= but not just <?

And I know it's a matter of personal choice and also depends on what your file mainly contains (HTML or PHP), but I personally prefer echoing HTML code snippets instead of opening and closing PHP tags, because I find it easier to read (there is also a very marginal performance advantage)