从两个选择列表中选择 A + B 时，#Anchor 加载结果页面

When A + B are selected from two select lists, Load results page at #Anchor?

本文关键字：选择 #Anchor 加载 结果 两个 列表      更新时间：2023-09-26

我有一个在线商店，里面有一个产品页面。该页面有两个选择框可供选择，并将根据这两个选项筛选结果。

如果我从选择框中选择条件 A + B，页面将筛选产品以显示具有该条件的产品。但是，当发生此事件时，页面将滚动到页面顶部。这在移动设备上尤其烦人，因为选择框不在页面顶部。

如何添加 javascript 事件以在选择时滚动到特定的div（例如 #ProductList）。

或者可能是将 #ProductList 添加到 url 末尾的 onload 事件。

我找到了根据所选 id 滚动到div id 的示例。但是我需要更简单的东西，当单击选择框时，它总是滚动到相同的div #ProductList。

此示例适用于所选的 id，但我需要一个滚动到一个特定div id 的通用 id

var select = document.getElementById('test');
select.onchange = function(){
var id = this.getElementsByTagName('option')[this.selectedIndex].value,
    el = document.getElementById(id),
    top = el.offsetTop;
window.scrollTo(0,top);
};

非常感谢任何帮助!!!

弗兰克

您可以使用 URL 片段跳转到所需的页面元素。请参阅下面的代码片段：

var select = document.getElementById('test');
select.onchange = function(){
    var id = this.getElementsByTagName('option')[this.selectedIndex].value;
    var link = window.location.href;
    // If URL already has a fragment, remove it
    if (link.indexOf('#') != -1)
        link = link.substring(0, link.indexOf('#'));
    // Add URL fragment with id of the div you want to jump to
    window.location.href = link + '#' + id;
};

只要写

var id = 'YOUR ID HERE',

而不是 

var id = this.getElementsByTagName('option')[this.selectedIndex].value,

我要做的是

$("#test").change(function(){
    var val=$(this).val();
    var divtext=""+$("#"+val+" p").html();// this is div content
});

我已经想通了！

感谢你们的不同观点！真的帮助我偶然发现了答案！

如果需要，您可以删除/存档此帖子。第一次来这里，所以不确定协议！

再次感谢

弗兰克

相关文章：