javascript - jQuery .load 页面然后使用主题标签导航到 anchor

Question

我需要 jQuery 函数的帮助，该函数允许我使用主题标签滚动到 .load() 页面上的 anchor 。

基本上，有人点击主页链接，它会打开一个模型窗口，他们用它来导航网站的其余部分。然后，该窗口使用相同的代码打开网站上的任何其他链接。我知道这些链接的格式不是最佳的，但这是我需要使用的格式。

我有以下代码显示在模型窗口中。

<div id="pop-top-menu">
  <p class="p_text">
    <a href="javascript:pop('properties.php#<?php echo strip_tags($_GET['property']); ?>');">Go Back</a> |
    <a href="javascript:pop('properties.php');">View by Resorts</a> |
    <a href="javascript:pop('private-homes.php');">View our Private Homes</a> |
    <a href="javascript:pop('rental-coupons.php');">View our Properties with Discount Coupons</a></p>
</div>

当有人点击其中一个链接时，它将通过以下代码:

function pop(id) {
        $("#body-cover").fadeIn(1000);
        $("#slide-content").load(id).slideDown(1000);
        $("#slide-content-close").delay(2000).fadeIn(1000);
    }

所以我需要让访问者单击 properties.php#property_id 并加载页面properties.php，然后导航到 anchor 标记。并非所有链接都有 anchor ，但很多链接都会有。

请注意，这不是基于 anchor 的导航。这是加载链接，然后导航到提供的 anchor (如果存在)。

Answer 1

未经测试，但是当我正确理解你的问题时，你可以像这样修改你的 pop 函数:

function pop(id) {
    // Expression to test if id has a hashtag
    var hasHash = /(#([^ ]*)/, 
        $hashID;
    $("#body-cover").fadeIn(1000);
    $("#slide-content").load(id).slideDown(1000);
    $("#slide-content-close").delay(2000).fadeIn(1000);
    if(hasHash.test(id)!== false) {
        // hasfound - grep it, and make a jQuery Object
        $hashID = $('#' + id.split('#')[1]);
        if($hashID.length) {
            // if it is found, scroll to this element with an animation
            // in case you just want a jump, simply set scrollTop 
            // and remove the animate method
            $('html, body').animate({
                 scrollTop: $hashID.offset().top
            }, 2000);
        }
    }
}