Question

我需要一个jQuery函数的帮助，这个函数允许我使用hashtags滚动到.load（）页面上的一个锚点。

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

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

<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，然后导航到锚标记。并非所有链接都有锚点，但很多都会有。

请注意，这不是基于锚点的导航。这是加载链接，然后导航到提供的锚点（如果存在）。

Answer 1

未经测试，但当我正确理解您的问题时，您可以像这样修改您的弹出功能：

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);
        }
    }
}

jQuery .load页面然后使用hashtag导航到锚点

1 个答案: