Question

我想要实现的是点击链接后执行2个操作 - 一个接一个

首先，转到某个页面
然后，平滑向下滚动并关注该页面上的textarea

这两个页面都在我的域名上。到目前为止有这个但是没有成功：

    jQuery('.link').click(function() {
        window.location.href = 'http://example.com/page';
    });
    jQuery('.link').click(function() {
        jQuery('html, body').animate({
            scrollTop: jQuery('.textarea').offset().top-220
        }, 700, function(){jQuery('.textarea').focus();});
    });

Answer 1

导航到新页面window.location.href后，当前上下文将丢失;第二个滚动逻辑将无法正常工作。也许您应该在新页面中执行滚动逻辑，而不是在点击事件中使用它。

您可能需要区分是否需要在新页面中自动滚动，您可以传递查询字符串，例如 - http://example.com/page?scroll=true - 并且在该页面加载中，您可以检查查询字符串并执行滚动逻辑。

Answer 2

您的代码无法正常工作，因为在将位置更改为新页面后，您的脚本会重新加载，并且click事件的上下文将丢失。如果您希望每次访问时都滚动（新）页面，那么您只需将第二个函数设置为onload事件即可。如果您希望它仅在通过该特定链接访问时向下滚动，那么您可以在链接href上的网址中添加参数，并通过在该新页面上获取该参数，可以确定是否已通过该链接访问并相应滚动。

jQuery('.link').click(function(e) {
    e.preventDefault();
    location = 'http://example.com/page/#/scroll';
});

var pageUrl = location;
if(String(pageUrl).substr(-8) == "#/scroll") {
    jQuery('html, body').animate({
        scrollTop: jQuery('.textarea').offset().top-220
    }, 700, function(){jQuery('.textarea').focus();});
}

通过访问这些链接来查看我的意思（查看脚本来源）： -

无滚动 - http://s.codepen.io/cod3rguy/debug/vgBpEb/

滚动 - http://s.codepen.io/cod3rguy/debug/vgBpEb/#/scroll

Answer 3

您不必使用2个功能。在第一个函数体中包含第二个函数的主体。

在jquery中单击函数后的2个事件

3 个答案: