使Menu-Item转到Home，然后滚动到div_JavaScript

在我的主页上，我有一系列包含内容的Div。 用户可以使用菜单项快速导航到div，单击该菜单项会将页面滚动到相关的div。 使用链接“ Beast Balls”（。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-球部

我如何才能做到这一点？
谢谢！

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

 <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失败，您的内容仍将照常导航而不会产生任何影响。 通过类链接到各节将取消此功能，并使其成为可访问性。

我建议通过URL传递变量。 然后，在您的主页脚本中，在页面加载后，获取该变量，然后使用它来触发对这些菜单项的点击，以使其进入所需的任何部分。

哦，我想我明白了。 您是否要访问主窗口并在用户离开站点的另一页面后对其进行动画处理。 对？ 您不应该使用标签来访问其他页面。 您应该尝试设置.beastball的样式，使其看起来像链接一样。 然后，使用jquerys open（“ www.siteName.com”，“ WinName”）方法打开您的主页URL。 确保将其记录为类似Home = open（“ URL”，“ Home”）的变量，然后

找到Home.location而不是使用动画中的位置。 如果我没有帮助您，我真的很抱歉:(

对“ .on”方法了解不多，但是尝试使用$（“ body”）而不是使用$（“ html，body”）。 抱歉，如果无法使用，请确保此“ Scroll：Top”有效，从未听说过

使Menu-Item转到Home，然后滚动到div

问题描述

1楼

2楼

3楼

4楼