使菜单项转到主页，然后滚动到 div

Question

在我的主页上，我有一系列包含内容的 Div。用户可以使用菜单项快速导航到 div，单击该菜单项会将页面滚动到相关 div。使用链接“野兽球”(.beast-balls) 和该链接的相关 div (.cat-beast-balls)，此类函数的代码如下：

$( '.beast-balls' ).on( "click", function() {
    $('html,body').animate({
        scrollTop: (($( ".cat-beast-balls" ).offset().top) - 150)
    }, 1000, scrollHandler2);
});

所以我的问题是，当用户不在主页时，我希望用户能够点击 .beast-balls 链接，被重定向到主页，然后滚动到 .cat-beast-balls div。

我该如何实现这一目标？
谢谢！

Answer 1

您不能像这样将点击事件转移到另一个页面。您应该使用锚点来获取此内容并覆盖锚点的默认事件：

 <a class="nav-link" href="#cat1">Section 1</a>
 <a class="nav-link" href="#cat2">Section 2</a>

 <div class="section" id="cat1">
    Section 1
 </div>

 <div class="section" id="cat2">
    Section 2
 </div>

然后要处理其他页面，只需在此处设置您的链接，如下所示：

<a href="home.html#cat1">Go to section on home</a>

在你的 jQuery 中处理这个你可以运行一个函数来查看 url 中是否有一个锚点并运行它：

function pageScroll(section) {
    $('html,body').animate({
        scrollTop: (($(section).offset().top) - 150)
    }, 1000, scrollHandler2);
}

function checkHash(){
    var hash = window.location.hash;

    if(hash){
        $(window).scrollTop(0);
        pageScroll(hash);
    }
}

$( '.nav-link' ).on( "click", function(e) {
    var location = $(this).prop('hash'); // Get Anchor
    e.preventDefault(); // Prevent browser from going to that anchor
    pageScroll(location);
});

// Assumes you have a class of 'home' on your body or somewhere on the page, so you only run this on the home page
if($('.home').length > 0){
    checkHash();
}

您应该使用锚点的另一个原因是，如果 JS 失败，您的内容仍将照常导航而没有效果。通过类链接到部分会取消此功能并使其成为可访问性问题。

Answer 2

哦，我想我现在明白了。您是否想在用户离开您网站的其他页面后访问主窗口并为其设置动画。正确的？您不应该使用 a 标签来访问其他页面。您应该尝试设置 .beastballs 的样式，使其看起来和行为都像链接。然后，使用 jquerys open("www.siteName.com", "WinName") 方法打开您的主页 url。确保将其记录为变量，例如 Home = open("URL", "Home") 然后

找到 Home.location 而不是在动画中使用位置。没有帮到你真的很抱歉:(

Answer 3

我建议，通过 url 传递一个变量。 然后，在您的主页脚本中，页面加载完成后，获取该变量，然后使用它触发对这些菜单项的点击，以访问他们需要转到的任何部分。

http://api.jquery.com/trigger/

Answer 4

不太了解“.on”方法，但尝试使用 $("body") 而不是使用 $("html,body")。对不起，如果它不起作用 另外，请确保此“Scroll:Top”有效，从未听说过