Question

我需要点击一个下拉选项，将我重定向到另一个页面。加载页面时，必须滚动到特定的div。

方案是：客户点击下拉框，他被重定向到向下滚动到产品部分的页面。

我设法只在页面中间没有重新加载或加载的情况下才能完成此操作。（经过一些修改）

我的示例代码是：

    <div class="product-field product-field-type-A"> <span class="product-fields-title-wrapper"><span class="product-fields-title"><strong>Choose</strong></span>
</span> <span class="product-field-display"><select id="field0custom_value" name="field[0][custom_value]" size="4" class="inputbox">
    <option value="" selected="selected">Apples</option>
    <option value="">Oranges</option>
</select>
</span>
    <span class="product-field-desc"></span>

    <br>
    <br>
    <div id="header">Header</div>

JS：

$("#field0custom_value").click(function() {
    $('html,body').animate({
        scrollTop: $("#header").offset().top},
        'slow');
});

PS。以上所有内容将整合到Virtuemart + Joomla 2.5中（目前点击选择框已被打破，我暂时无法理解）

Answer 1

点击页面A中的（选择框）项后，您想跳到页面B上的特定锚点吗？

实际上，这可以用比您想象的更少的Javascript来完成，实际上没有任何Javascript（但不是没有添加后端逻辑或使用链接而不是select框）。

第A页

$(function(){
    $("body").delegate("#target", "change", function(e){
        // >>> this is the interesting line 
        location.href = "destination.html#" + $(target).val();
    });
});

</script>

<select id="target">
    <option value="target1">Target 1</option>
    <option value="target2">Target 2</option>
    <option value="target3">Target 3</option>
</select>

更改附加“哈希”的位置

第B页

<br><!-- 20 of them; only to blow up the page height (or real content) -->
<br>
<div id="target1">Target 1</div>
<br>
<br>
<div id="target2">Target 2</div>
<br>
<br>
<div id="target3">Target 3</div>
<br>
<br>

id属性引用哈希值（锚点），或者添加<a name="target1" />

使用链接时，您也可以在页面A中没有任何Javascript时执行此操作：

 <a href="destination.html#target1">Target A</a>

单击项目后加载页面后滚动到特定div

1 个答案: