点击触发PHP数据库查询后，如何自动滚动到目标div？

我来帮你搞定这个自动滚动的需求～你的思路是对的，但现有代码可能因为执行时机或者细节问题导致滚动不生效，下面是调整后的方案和解释：

问题分析 #

你当前在PHP中输出的$(document).ready()脚本，理论上会在DOM加载完成后执行，但如果页面是通过表单POST提交刷新的，可能存在两个潜在问题：

1. 脚本执行时，查询结果的表格还没完全渲染，导致$('.graph').offset().top获取的位置不准确
2. 如果jQuery库没有提前加载，脚本会直接报错无法执行

解决方案 #

1. 确保jQuery提前加载 #

在页面的<head>标签内先引入jQuery库（如果还没加的话）：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

（如果不想用CDN，也可以下载jQuery文件到本地后引入）

2. 调整滚动脚本的执行时机 #

把原来的脚本改成在window.load事件中执行，确保页面所有内容（包括数据库查询出来的表格）都加载完成后再滚动，同时增加元素存在性检查，避免报错：

<?php 
session_start(); 
include_once 'includes/dbh.php'; 

if(isset($_POST['search'])) { 
    // 安全提示：这里要修复SQL注入问题，后面会提到
    $searchvalue = $_POST['searchvalue']; 
    $query = "SELECT * FROM `users` WHERE CONCAT(`user_id`, `user_username`, `user_password`, `user_name`, `user_gender`, `user_age`, `user_contact`, `user_email`, `user_address`, `user_industry`, `user_findout`, `user_admin`) LIKE '%".$searchvalue."%'"; 
    $result = mysqli_query($conn,$query); 

    // 修改后的滚动脚本
    echo" 
    <script type='text/javascript'> 
        $(window).on('load', function() {
            // 检查目标div是否存在
            const targetDiv = $('.graph');
            if (targetDiv.length > 0) {
                // 执行平滑滚动，-20可以让顶部留一点间距，可根据需求调整
                $('html, body').animate({ 
                    scrollTop: targetDiv.offset().top - 20 
                }, 'slow'); 
            }
        });
    </script>"; 
} else { 
    $query = "SELECT * FROM `users`"; 
    $result = mysqli_query($conn,$query); 
} 
?>

3. 关键安全修复：避免SQL注入 #

你的现有代码存在严重的SQL注入风险，直接将用户输入拼接进SQL语句非常危险，强烈建议改用MySQLi预处理语句：

if(isset($_POST['search'])) { 
    $searchvalue = "%".$_POST['searchvalue']."%"; 
    // 使用预处理语句
    $query = "SELECT * FROM `users` WHERE CONCAT(`user_id`, `user_username`, `user_password`, `user_name`, `user_gender`, `user_age`, `user_contact`, `user_email`, `user_address`, `user_industry`, `user_findout`, `user_admin`) LIKE ?";
    $stmt = mysqli_prepare($conn, $query);
    mysqli_stmt_bind_param($stmt, "s", $searchvalue);
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt); 

    // 滚动脚本同上...
}

额外注意事项 #

• 确保目标div的类名确实是graph，比如页面中有<div class="graph">...</div>，并且这个div包含你用来展示查询结果的表格
• 如果滚动位置还是不准确，可以调整offset().top后面的偏移值（比如-20），让滚动位置更符合你的需求

内容的提问来源于stack exchange，提问作者yl2201