Question

我有一个网站，其大部分内容都采用单页样式，菜单链接使用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插件（例如标签）发生冲突。

有没有办法解决我的问题，以便我可以有滚动到页面的菜单项，当我不在主页面上时，可滚动的＆＃39;菜单项链接回首页（以及相关部分）。

Answer 1

由于它们都在主页上，因此请将您的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);
    }

  });

});

Answer 2

代码片段提供一个想法：

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

jQuery单页滚动，链接到其他页面

2 个答案: