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單頁滾動鏈接到其他頁面

回答

相關問題