Javascript jQuery单页滚动，带有指向其他页面的链接

我有一个网站，它的大部分内容都是单页面样式，带有菜单链接，可以使用div ID作为锚（例如www.mydomain.com/#div ID）向下滚动页面。但是，还有一些额外的外部页面也链接在标题中

我遇到的问题是，当我在一个外部页面（例如，www.mydomain.com/page-1）上时，用于向下滚动主页的菜单链接不起作用（它们显示为www.mydomain.com/page-1/#div id）

我使用linkrel属性添加div ID，这样就不会与其他jQuery插件（如tabs）冲突

---

有没有办法解决我的问题，这样我就可以有滚动到页面的菜单项，但当我不在主页上时，“可滚动”菜单项链接回首页（和相关部分）。

代码片段提供了一个想法：

jQuery(document).ready(function($) {

    jQuery('a[href*=#]').click(function(e) {
            //main page found    
            if (document.location.pathname == "/") {
                e.preventDefault();
                var navHeight = jQuery('.header-site').height();
                var id = jQuery(this).attr('rel');
                var scrollTo = jQuery('#' + id).offset().top - navHeight;

                jQuery('html,body').animate({
                    'scrollTop': scrollTo
                }, 500);
            });
    }
});

---

由于它们都在主页上，请将您的HREF更改为以

/

开头：-

<a href="/#test">test</a>

---

我想你可以只检查域名或主页分隔符，如果点击事件是在那里触发的，只需通过else拦截即可。基本上是额外的条件来检查是否有外部页面。你能添加你的html代码吗？

<a href="/#test">test</a>

function scrollToSection(id) {

  var navHeight = jQuery('.header-site').height();
  var scrollTo = jQuery('#' + id).offset().top - navHeight;

  jQuery('html,body').animate({
    'scrollTop': scrollTo
  }, 500);
}

jQuery(document).ready(function($) {

  var isHomepage = window.location.pathname == '/';

  if (isHomepage && window.location.hash) {
    var id = window.location.hash.split('#')[1];
    scrollToSection(id);
  }

  jQuery('a[href^="/#"]').click(function(e) {

    if (isHomepage) {
      e.preventDefault();
      var id = $(this).attr('href').split('#')[1];
      scrollToSection(id);
    }

  });

});