去頁面加載取決於點擊鏈接的錨點

Question

嗨我有一個代碼，需要我在頁面加載錨定。

如果我有菜單鏈接是不同的錨點怎麼辦？當我點擊link1時，它會加載一個頁面並將我帶到anchor1，當我點擊link2時，它會將我帶到同一頁面，但是到達anchor2？

$(function(){ 
    $('html, body').animate({ 
     scrollTop: $('.anchor1').offset().top 
    }, 1000); 
    return false; 
}); 

Answer 1

這看起來像從包含菜單鏈接的頁面傳遞值到包含使用javascript的錨點的其他頁面。

有很多方法可以做到這一點，其中之一是使用cookie。 讓說你有下拉菜單頁面，從中您在Menupage JS

$(#menuselect).change(function(){ 
    //Store value of anchor class to passed to next page from option sel;ected in menu dropdow in cookie 
    $.cookie('anchorclass',$(this).val()); 

    $(window).load('AnchorPage.htm'); // Go to page containing anchors 
}); 

在錨頁面通過錨的價值現在

<select id="menuselect"> 
    <option value=".anchor1"> Anchor1 </option> 
    <option value=".anchor2"> Anchor2 </option> 
    <option value=".anchor3"> Anchor3 </option> 
</select> 

現在，您可以檢查值存儲在cookie並使用您的代碼在頁面加載時到達該錨點。

AnchorPage.htm 

$(document).ready(function(){ 
    var classofAnchor = '.anchor1'; //Set default target anchor class 
    if($.cookie('anchorclass') ! = null) 
    { 
    classofAnchor = $.cookie('anchorclass'); // Fetch value from cookie 
    } 
    $('html, body').animate({ 
     scrollTop: $(classofAnchor).offset().top 
    }, 1000); 
});