Yii2：刷新页面保留原位置并通过URL传递变量（嵌入函数实现）

我来帮你搞定这个需求——打造一个能通过URL传递参数、刷新页面后还能回到原滚动位置的下拉选择器。下面是完整的可用代码，再给你拆解下关键细节：

<?php
// 定义下拉选项的键值对：键是要传递的URL参数值，值是用户看到的文本
$data = [
    "line" => "Linea", 
    "column"=>"Columnas", 
    "bar"=>"Barras", 
    "pie"=>"Pastel", 
    "scatter" => "Puntos", 
    "area" => "Area"
];

// 构建基础URL：获取当前页面URL，同时移除已存在的type参数，避免重复拼接
$baseUrl= Url::current(['type'=>null]);

// 渲染Kartik Select2组件
echo \kartik\select2\Select2::widget([
    'name' => 'Tipo',
    'data' => $data,
    'options' => [
        'placeholder' => 'Selecciona un tipo'
    ],
    'pluginEvents'=>[
        "select2:select" => "function(e) {
            // 选择选项时，先记录当前页面的滚动位置到sessionStorage
            sessionStorage.setItem('scrollPosition', window.scrollY);
            // 跳转到拼接了type参数的URL，触发页面刷新
            location='$baseUrl&type='+e.params.data.id;
        }"
    ]
]);
?>

<!-- 在页面底部添加这段JS，用于页面加载时恢复滚动位置 -->
<script>
window.addEventListener('load', function() {
    const savedScrollPos = sessionStorage.getItem('scrollPosition');
    if (savedScrollPos) {
        // 恢复到之前的滚动位置
        window.scrollTo(0, parseInt(savedScrollPos));
        // 用完就清除存储的位置，避免下次页面加载误触发
        sessionStorage.removeItem('scrollPosition');
    }
});
</script>

关键部分说明： #

• 下拉选项数据：$data数组里的键（比如line）是要通过URL传递的参数值，对应的值（比如Linea）是展示给用户的友好文本。
• 基础URL构建：Url::current(['type'=>null])会获取当前页面的URL，同时自动移除已有的type参数，这样不管之前URL里有没有type，拼接后都不会出现重复的参数。
• Select2选择事件处理：当用户选中一个选项时，我们先通过sessionStorage记录当前页面的滚动位置，然后跳转到拼接了type参数的新URL，触发页面刷新。
• 恢复滚动位置：页面加载完成后，从sessionStorage读取之前保存的滚动位置，将页面滚动到对应位置，之后清除存储的位置数据，避免影响后续页面加载。

这样就能完美实现你要的效果：选择下拉选项后通过URL传参刷新页面，并且刷新后页面会自动回到之前的位置~

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