jQuery单页滚动与其他页面的链接答案

【问题标题】：jQuery single page scrolling with links to other pagesjQuery单页滚动与其他页面的链接
【发布时间】：2015-11-20 08:08:39
【问题描述】：

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

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

jQuery(document).ready(function($){
jQuery('a[href*=#]').click(function (e){
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);
});

});

我使用link rel属性添加div ID，这样就不会和tabs等其他jQuery插件冲突了。

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

【问题讨论】：

我认为你可以只检查域名或主页分隔符，如果这是触发点击事件的地方，只需通过 else 拦截。基本上是检查外部页面的额外条件..
你能把你的html代码加进去吗？

标签： javascript jquery html

【解决方案1】：

由于它们都在主页上，请将您的hrefs更改为以/开头：-

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

这将解决这个问题 - www.mydomain.com/page-1/#div-id

然后将你的函数拆分出来，以便在页面加载和点击时调用它，如果你在主页上，则只有preventDefault，否则让它用哈希将你重定向到主页。

因为所有的 href 现在都是 /# 我正在使用 jQuery('a[href^="/#"]')

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);
    }

  });

});

【讨论】：

【解决方案2】：

代码 sn-p 给出一个想法：

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);
            });
    }
});

【讨论】：