超链接单击重定向到主页并滑动 div

Question

我是否遗漏了某些内容或使用错误的术语进行搜索，但我无法自己解决此问题。如标题中所述，单击 navLink 应该返回主页，但也可以滑动切换幻灯片 2 并为网站设置动画。以下代码重新加载主页，但回调被覆盖或在此上下文中完全错误，因为切换和动画代码在其他上下文中工作。

非常感谢您的帮助

function goHome(callback) { 
window.location = $("#navLink").find("a").attr("href");
callback() 
} 

function changeHome(){
$("#slide-2 h2").next(".portNav").slideToggle(800);
$("html, body").animate({scrollTop:$(this).offset().top}, 'medium');
}

$("#navLink").click(function(event){
event.preventDefault();
goHome(changeHome)
});

Answer 1

您正在更改文档位置，加载新页面，javacript 将再次加载，并且您的回调将永远不会在您离开页面时执行。

Answer 2

您在这里有 2 个选项来满足您的需要

1- 查询字符串

您可以使用查询字符串来确定此负载是来自您的链接还是普通链接 像这样：

$(function(){
 $('#redirect').click(function(){
   window.location = 'YOUR_HOME_DOCUMENT?lnk=1';
 });
});

然后在您的主页 ready() 函数中，检查此查询字符串是否存在，如果提供，然后为您想要的任何内容设置动画。

示例：

1- 首先，为了方便读取 Querystring 变量，我总是使用以下 jQuery 插件。 （我不记得我从哪里得到这个代码，但非常感谢原始海报）。

$.extend({
    getUrlVars: function () {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    },
    getUrlVar: function (name) {
        if ($.getUrlVars()[name] == null) {
            return "";
        }
        else {
            return $.getUrlVars()[name];
        }
    }
});

那么，我可以这样做：

$(function (){ // a short hand for $(document).ready(function)  ;)

var comingFromMyLink = $.getUrlVar('lnk');

if(comingFromMyLink)
{
     // do the required animation here
}

});

2- Cookies

我真的不建议在这种情况下使用此选项，但老实说，我想为您提供尽可能多的信息，您可以选择任何您认为合适的选项。

您可以在 cookie 中保留标志或变量，并尝试将其放入您的主页

查看此示例：http://jquery-howto.blogspot.com/2010/09/jquery-cookies-getsetdelete-plugin.html

或者这个插件：http://archive.plugins.jquery.com/project/Cookie

就是这样，如果您仍然需要这种方式的帮助，请告诉我，希望我的回答对您有用:)