jQuery单页滚动以及指向其他页面的链接

Sam Skirrow 发表于 Dev

山姆·斯基罗

我有一个网站，它的大部分内容都在一个页面样式中，带有菜单链接，这些菜单链接使用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，以免与其他jQuery插件（例如标签）发生冲突。

有没有一种方法可以解决我的问题，所以我可以让菜单项滚动到页面上，而当我不在主页上时，“可滚动”菜单项链接回到首页（以及相关页面）部分）。

本

因为它们都在主页上，所以将您的href更改为以/：-开头。

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

  });

});