Scrollspy使用完整的URL

我想讓scrollspy在使用絕對url而不是＃anchor鏈接時工作。Scrollspy使用完整的URL

例如，我可以輕鬆地運行scrollspy只用<a href="#section1"></a>

我希望能夠通過使用<a href="http://myurl.com/#section1"></a>

之所以這樣做是爲了運行scrollspy，是主頁上的主要導航scorllspy，但博客不是主頁的一部分。當訪問博客，然後點擊主頁上的鏈接時，您將被路由到http://myurl.com/blog/#section1而不是主頁ID。

我發現這個解決方案（use url and hash with bootstrap scrollspy），但無法讓它充分發揮作用。經過一些調整和一些正則表達式組合後，我可以將它添加到第一個菜單項，但不會刷新。

任何想法讓這個工作？有我應該使用的另一個js庫嗎？

解決方案感謝特洛伊

jQuery(function($){ 
    // local url of page (minus any hash, but including any potential query string) 
    var url = location.href.replace(/#.*/,''); 

    // Find all anchors 
    $('.nav-main').find('a[href]').each(function(i,a){ 
    var $a = $(a); 
    var href = $a.attr('href'); 

    // check is anchor href starts with page's URI 
    if (href.indexOf(url+'#') == 0) { 
     // remove URI from href 
     href = href.replace(url,''); 
     // update anchors HREF with new one 
     $a.attr('href',href); 
    } 

    // Now refresh scrollspy 
    $('[data-spy="scroll"]').each(function (i,spy) { 
     var $spy = $(this).scrollspy('refresh') 
    }) 
    }); 

    $('body').scrollspy({ target: '.nav-main', offset: 155 }) 

});

我爲了得到數據偏移刷新scrollspy後重新申請加入$('body').scrollspy({ target: '.nav-main', offset: 155 })。經過一些試驗和錯誤之後，這是我能找到的唯一解決方案。

來源

2014-01-14 SmashBrando

方式scrollspy是編碼，它看起來有href的錨以#開頭。

有一種方法可以做到這一點。不漂亮，但可能工作。

一旦頁面加載，在你的jQuery就緒功能，搜索所有錨的文件（你的目標容器，或身體內部），並檢查是否href開始與你的主機名，其次是/#，和如果匹配改變錨的href僅僅是#

這裏之後的部分是一些粗糙的代碼（未測試），你可以嘗試（說你scrollspy的目標是與#navbar ID的DIV：

jQuery(function($){ 
    // local url of page (minus any hash, but including any potential query string) 
    var url = location.href.replace(/#.*/,''); 

    // Find all anchors 
    $('#navbar').find('a[href]').each(function(i,a){ 
    var $a = $(a); 
    var href = $a.attr('href'); 

    // check is anchor href starts with page's URI 
    if (href.indexOf(url+'#') == 0) { 
     // remove URI from href 
     href = href.replace(url,''); 
     // update anchors HREF with new one 
     $a.attr('href',href); 
    } 

    // Now refresh scrollspy 
    $('[data-spy="scroll"]').each(function (i,spy) { 
     $(spy).scrollspy('refresh'); 
    }); 
    }); 

});

現在確保你運行這個後您加載bootstrap.min.js文件。

如果要初始化通過JavaScript你ScrollSpy，而不是數據 - 通過*屬性，然後更換三行代碼，其中scrollspy刷新機智的代碼初始化你scrollspy目標&設置。

來源

2014-01-15 00:57:54

現在我只注意到你提到你的博客不是主頁的一部分。它是否在iframe或框架中？如果是這樣，滾動將不會跨文檔工作（框架在單獨的文檔元素中） –

它是同一個域的一部分。只是在使用錨點ID而不是完整的網址時，導航在除首頁之外的所有網頁都變得毫無用處。我試過上面的代碼，但無法讓它工作。我改變了導航的ID，以我使用的ID無濟於事。你可以看到我在這裏工作 - http://bic.bldsvr.com/ – SmashBrando

我想通了。我正在使用根啓動器主題，它剝離了破壞整個系統的相對URL。你的代碼是必需的，並且工作。注意根主題的用戶禁用相對-urls.php – SmashBrando

也可以添加data-target屬性您的鏈接元素：data-target="#link"

<a href="http://www.site.ru/#link1" data-target="#link1">Link1</a> 
<a href="http://www.site.ru/#link2" data-target="#link2">Link2</a>

來源

2014-02-09 20:52:11 kerstvo

這是真的，但在我的情況下，我使用WordPress，這樣做需要一個自定義步行者。爲了節省時間，我選擇了阻力較小的路線。 – SmashBrando

這很容易在WordPress中實現，因爲我已經有了一個自定義步行者，謝謝@kerstvo :) – gernberg

更快的解決方案。謝謝 – Moppo

我希望這有助於誰像我一樣運行到這個相同的情況下任何人。

查看直播：Live Sample (Handyman Website built on WordPress, roots.io, and Bootstrap 3)

下面你可以看到，我只有條件不用時在主頁上執行此。這使得滾動間諜行爲在主頁上保持不變，並且在從非主頁頁面點擊時改變鏈接以鏈接到主頁上它們各自的部分。

這個是我想出了（相當好測試）

只需將需要爲需要替換的jQuery的/ CSS選擇器。

以下是完整的片段，其使用滾動間諜，上述方案和滾動了一下切面光滑的行動

/** 
* Scroll Spy via Bootstrap 
*/ 
$('body').scrollspy({target: "#nav_wrapper", offset:50}); 

/** 
* Scroll Spy meet WordPress menu. 
*/ 
// Only fire when not on the homepage 
if (window.location.pathname !== "/") { 
    // Selector for top nav a elements 
    $('#top_main_nav a').each(function() { 
     if (this.hash.indexOf('#') === 0) { 
      // Alert this to an absolute link (pointing to the correct section on the hompage) 
      this.href = "/" + this.hash; 
     } 
    }); 
} 

/** 
* Initiate Awesome Smooth Scrolling based on a.href 
*/ 
$('a.smooth-scroll, #top_main_nav a').click(function() { 
    target = $(this).attr('href'); 
    offset = $(target).offset(); 
    $('body,html').animate({ scrollTop : offset.top }, 700); 
    event.preventDefault(); 
});

View it Live Here

來源

2014-04-17 04:22:11 ErikTheDeveloper

Scrollspy使用完整的URL

回答

相關問題