jQuery腳本平滑滾動到具有不同偏移量的不同部分

我爲我的單頁網站使用了平滑滾動腳本。它滾動到每個錨點。jQuery腳本平滑滾動到具有不同偏移量的不同部分

由於設計原因，我無法將錨點直接對齊到頁面頂部。我必須創建隱藏的錨點，這些錨點位於頁面的上方，因此它不會完全貼到頂部。

這是我目前使用的腳本：

jQuery(document).ready(function($) { 
    $(".scroll").click(function(event){ 
     event.preventDefault(); 
     $('html,body').animate({ 
      scrollTop: $('[name="' + this.hash.substring(1) + '"]').offset().top 
     }, 500); 
    }); 
});

我被告知，我可以使抵消這種腳本中發生。我可以簡單地在頂部添加一些東西來將它抵消一定數量的像素，而不是在每個地方都有這些小的隱藏錨點。這將是頂部 - 250

$('html,body').animate({ 
    scrollTop:$('[name="' + this.hash.substring(1) + '"]').offset().top - 250 
}, 500);

問題是，這將使偏移總是250像素，我需要它是變量，以便例如，投資組合DIV可以用的200像素偏移固定，但聯絡div只有50px。

任何人都可以幫助我寫一些選擇器到腳本，這將允許我調整這個頂部 - [變量]基於哪個div被錨定？

來源

2012-08-09 Francesca

你有沒有試過你的代碼片段？它應該像獲得錨的偏移量並從動態值中減去250一樣工作。可以肯定的是，嘗試用括號圍繞你的計算。 – Bojangles 2012-08-20 11:34:15

你可以在http://jsfiddle.net/上提供一些簡單的測試代碼嗎？不知道你的'div＃contact'和'div＃portfolio'在哪裏。 – Giberno 2012-08-20 12:12:48

嗨，是的，我已經嘗試過。它可以工作，但它始終位於div上方250px處，這不是我想要的。 – Francesca 2012-08-21 08:18:06

您並沒有真正指出規則是用來確定指定錨點的頂部值的偏移量。

所以也許最簡單的事情就是引入一個屬性，您可以使用該屬性來調整您的命名錨或您想要滾動查看的任何元素的偏移量。

因此，例如，這裏有一個名爲anchor的新屬性，名爲data-section-offset，我想偏移 20px。

<a id="myAnchor" data-section-offset="20">My Section</a>

在您的點擊處理程序中，您可以提取動畫的屬性值。

jQuery(document).ready(function($) { 

    $(".scroll").click(function(event) { 
     event.preventDefault();   
     var $anchor = $('#' + this.hash.substring(1)); 
     $('html,body').animate({ 
      scrollTop: $anchor.offset().top - $anchor.attr('data-section-offset') 
     }, 500);   
    }); 
});

這裏是fiddle顯示進一步的例子。

注：JQuery的具有數據的方法，以便該屬性可以（如上所述）或者拉到這樣

$anchor.attr('data-section-offset')

或這樣

$anchor.data('section-offset')

正如@Ben指出HTML5 specification for custom data attributes是非常有用的>HTML 5 data- Attributes。

來源

2012-08-20 12:38:59

使用'

'和'' 您的自定義屬性也會打破頁面驗證。它可以工作，但是如果你想使用自定義屬性，至少應該使用新的HTML5標準，方法是用'data-'前綴。 – BenSwayne 2012-08-20 19:35:20

@BenSwayne感謝您的評論 - 必須承認我不知道自定義數據屬性的HTML5規範。 – 2012-08-20 19:54:23

首先，您不需要使用舊的<a name=慣例。查看主播HTML anchors on w3schools上的w3schools頁面。現在最好的做法是通過id鏈接一個容器元素。

因此，如果您鏈接到某個div的某些內容，請使用<div id="linkToMe">My content in here.</div>和<a href="#linkToMe">The link text</a>。

這當然會破壞你的上面的代碼，因爲它正在尋找名稱的元素。你想通過id找到他們（反正更快！）。

在我的網頁上，我有一個工具欄在頂部有時是position: fixed;，所以當我滾動我想抵消滾動位置，所以它不會在我的工具欄在頁面頂部下方。

這是我要做的事：

function goToByScroll(id) { 
    //Find toolbar height 
    var pageOffset = 0, 
     hdr = $('#sub'), 
     tb = $('#sitemenu'); 
    if (hdr.css('position') == 'fixed') { pageOffset += hdr.height() } 
    if (tb.css('position') == 'fixed') { pageOffset += tb.height() } 

    //Scroll the document 
    $('html,body').animate({ scrollTop: $("#" + id).offset().top - pageOffset }, 'slow'); }

，然後用jQuery連線起來：

$(".jumptoid").click(function (e) { 
    e.preventDefault(); 

    // Track in google analytics if you are using it. 
    _gaq.push(['_trackEvent', 'Jump to Id', e.currentTarget.host, this.href, 0]); 

    // Scroll to item location using jquery 
    goToByScroll(this.href.split('#')[1]); 

    // Push History in browser bar so the forward/back button works 
    window.location.hash = this.href.split('#')[1]; 

    return false; 
});

這將完全一致的目標元素的頂部，我的頭的底部/工具欄，如果它們的位置是固定的，或者如果不是，則爲瀏覽器視口的頂部。

在你的情況下，你要麼改變你如何計算偏移量（而不是我的hdr和tb項目，你可以做一些其他的數學或看看其他頁面元素），或者你可以使用建議的自定義屬性由@chris moutray提供。

如果您想使用屬性，請使用建議的以data-開頭的html5標準，以便它通過驗證。例如<div id="linkToMe" data-scroll-offset="250">My content here</div>，然後使用@ chris的代碼來抓取該屬性，如$anchor.attr('data-scroll-offset')。

來源

2012-08-20 19:48:29 BenSwayne

嗨，謝謝，我會研究這個，看看它是如何工作的。我無法鏈接到div容器本身的原因純粹是因爲它將容器置於頂部（當我希望它被抵消一點時），所以如果這樣做的話，我會非常高興:)感謝您的時間。 – Francesca 2012-08-20 20:41:19

@FrancescaHaselden讓我們知道如果您的問題是通過接受答案解決的，否則考慮添加評論，如果您需要進一步澄清，我很樂意添加更多信息！ – BenSwayne 2012-08-22 19:54:55

jQuery腳本平滑滾動到具有不同偏移量的不同部分

回答

相關問題