使用元素ID滾動到頁面上的元素，流星

我的問題很簡單，但我很努力地找到答案。我正在使用流星來創建一個網站。用我的流星，我使用鐵路路由器來瀏覽我的頁面和模板。我的頭標總是保持不變。我只通過使用熨斗路由器更改包含在身體內的模板來更換身體。我有一個頁面，其中包含帶ID的錨定標記，我想讓頁面自動滾動到我的網頁上的某個錨點，當我的模板發生更改時，由於用戶導航到該頁面。不幸的是，我只能提供代碼片段，因爲我正在爲一家公司做網頁，而且不想泄漏信息。我認爲代碼片段就足夠了。使用元素ID滾動到頁面上的元素，流星

我已經試過了鐵路由器onAfterRun：

Router.map(function(){ 
this.route("cpdEvents", { 
    path: "cpd.html#events", 
    onAfterRun: function() { 
     e.preventDefault(); 
      $('html, body').animate({ 
      scrollTop: $("a[name=events]").offset().top 
      }, 600); 
    } 
    }); 
});

我試圖流星的模板渲染功能：我的網站的結構，而不是明顯的一切

if (Meteor.isClient) { 
Template.cpd.rendered = function(){ 
    e.preventDefault(); 
    $('html, body').animate({ 
     scrollTop: $("a[name=events]").offset().top 
    }, 600); 
} 
}

例子。只是索引html和用戶導航到的cpd.html。 JavaScript已經在上面顯示。

的index.html：

<head> 
<meta ..... /> 
<title></title> 
</head> 
<body> 
{{> index}} 
</div> 
</body>

cpd.html：

<template name="cpd"> 
.... 
<a name="events"></a> 
.... 
</template>

只是額外的信息：

我使用的流星版本包含jQuery庫，我已經測試了我的jQuery作品。

如果我沒有使用流星，並使用例如HTML。這很容易通過在URL末尾添加「＃」和id來完成。像www.example.com/cpdEvents#events

來源

2014-12-30 MartinS

不知道我是否理解你，但你也可以在流星中添加井號標籤。只需點擊您的href，就可以通過鐵路線r發送新的標籤。

<li><a href="{{pathFor 'posts.index'}}"><span class='glyphicon glyphicon-home'></span> Blog</a></li> 
<li><a href="{{pathFor 'overview' hash='about'}}"><span class='glyphicon glyphicon-user'></span> About Me</a></li> 
<li><a href="{{pathFor 'overview' hash='meetup'}}"><span class='glyphicon glyphicon-map-marker'></span>My Meetup</a></li> 
<li><a href="{{pathFor 'overview' hash='contact'}}"><span class='glyphicon glyphicon-envelope'></span> Contact Me</a></li>

如果在該頁面上找到該標籤，它會自動滾動到該標籤。通過重寫scrollToHash函數，您可以更改滾動行爲。我的網站Click。在那裏我可以通過導航欄訪問aboutme，聚會，通過留在同一頁面並只改變標籤。

來源

2014-12-30 12:21:55 chaosbohne

我正在爲你的答案+1，因爲你剛剛教會了我一些東西。感謝那。 – CodeChimp

你完全理解我:)首先感謝您的幫助。如果我正確理解你，流星/鐵路路由器默認支持滾動到哈希？因此，如果我的網址是www.example.com/cpd#events，瀏覽器窗口應該默認滾動到事件定位符？如果是這樣，我的滾動哈希不起作用。在一個不相關的主題上，我喜歡你的網站。有沒有什麼特別的你爲你的網站使用低帶寬，因爲我的首次加載時使用8MB？ – MartinS

是的，它默認跳轉到那裏。這個網站是我的自由時間項目，以提高我對流星細節的知識。如果您想縮小尺寸，則需要在生產模式下部署項目。源代碼可在這裏https://github.com/Chaosbohne/bicobic – chaosbohne

您可以滾動使用jQuery像這樣：

$(document).scrollTop($("#myElement").offset().top);

哪裏#myElement是要跳轉到，像一個div或者這種元素的id。

我會把這在我的模板呈現的功能是這樣的：

Template.myTemplate.rendered =函數（）{$ （文件）.scrollTop（$（「＃myElement」）的偏移量（）。最佳）; }

你甚至可以變得富有創造性，並將要跳轉到的元素的ID作爲路由中數據的一部分或通過Session變量傳入。或通過其他方式。不少選擇，真的。

來源

2014-12-30 12:18:18 CodeChimp

感謝您的回答。它的工作原理，但不是我正在尋找的。因爲如果您使用普通網址www.example.com/cpd，則瀏覽器窗口必須位於頁面的頂部。如果您使用www.example.com/cpd#events url，瀏覽器窗口必須滾動到事件定位點。因此，如果我使用您的代碼，瀏覽器窗口將始終在事件定位點打開。但是，您的代碼仍然可以幫助我獲得臨時解決方案。我可以創建多個網頁模板，並給他們其他名稱。所以我有多個可以使用的渲染函數。但這是很多冗餘代碼。 – MartinS

使用元素ID滾動到頁面上的元素，流星

回答

相關問題