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

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

我遇到的问题是，当我在其中一个外部页面上（例如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); 
}); 

});

我使用链接rel属性来添加div ID，这样我就不会与其他jQuery插件（如选项卡）发生冲突。

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

来源

2015-11-19 Sam Skirrow

我想你可以只检查域名或主页分离器，如果这是在click事件被解雇只是通过别人截距。基本上额外的条件来检查，如果外部页面.. – Abs

你可以添加你的HTML代码？ – DinoMyte

由于他们都是在主页上，改变你的HREF入手/： -

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

这将阻止这个问题 - WWW .mydomain.com/page-1 /＃div-id

然后将您的功能拆分出来，以便在页面加载和clic时调用它k，如果你在主页上，只有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); 
    } 

    }); 

});

来源

2015-11-20 00:08:39 BenG

很好的回答，完美的工作， –

代码片段给一个想法：

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

来源

2015-11-19 23:43:39 Abs

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

回答

相关问题