如何爲平滑滾動設置偏移量

Question

我已在my site上實施了CSS Tricks Smooth Page Scroll，它的工作非常好。但是，因爲我在頁面頂部有一個固定的導航欄，所以當頁面滾動到適當的錨點div時，div的頂部會消失在導航欄後面。我怎樣才能抵消滾動（約70px），以便顯示整個div？我試過這樣做：

var targetOffset = $target.offset().top - 70; 

但是這並不奏效。該頁面會滾動到合適的位置，但會立即跳回，以便隱藏div的頂部。我錯過了什麼？以下是代碼全部：

$(function() { 

    function filterPath(string) { 
     return string 
     .replace(/^\//,'') 
     .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
     .replace(/\/$/,''); 
    } 

    var locationPath = filterPath(location.pathname); 
    var scrollElem = scrollableElement('html', 'body'); 

    // Any links with hash tags in them (can't do ^= because of fully qualified URL potential) 
    $('a[href*=#]').each(function() { 

     // Ensure it's a same-page link 
     var thisPath = filterPath(this.pathname) || locationPath; 
     if ( locationPath == thisPath 
      && (location.hostname == this.hostname || !this.hostname) 
      && this.hash.replace(/#/,'')) { 

       // Ensure target exists 
       var $target = $(this.hash), target = this.hash; 
       if (target) { 

        // Find location of target 
        var targetOffset = $target.offset().top - 70; 
        $(this).click(function(event) { 

         // Prevent jump-down 
         event.preventDefault(); 

         // Animate to target 
         $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { 

          // Set hash in URL after animation successful 
          location.hash = target; 

         }); 
        }); 
       } 
     } 

    }); 


    // Use the first element that is "scrollable" (cross-browser fix?) 
    function scrollableElement(els) { 
     for (var i = 0, argLength = arguments.length; i <argLength; i++) { 
      var el = arguments[i], 
      $scrollElement = $(el); 
      if ($scrollElement.scrollTop()> 0) { 
       return el; 
      } else { 
       $scrollElement.scrollTop(1); 
       var isScrollable = $scrollElement.scrollTop()> 0; 
       $scrollElement.scrollTop(0); 
       if (isScrollable) { 
        return el; 
       } 
      } 
     } 
     return []; 
    } 

}); 

在此先感謝您的幫助。

Answer 1

這總是發生。我搜索和搜索答案，感到沮喪，發佈一個問題尋求幫助，然後立即找到我的問題的答案。愚蠢。無論如何，這是解決任何可能有同樣問題的人的解決方案。

如果你想改變由70像素的偏移量，例如，更改代碼這樣：

var targetOffset = $target.offset().top - 70; 

但是，除非你刪除了這行代碼...

location.hash = target; 

...頁面將滾動到正確的位置，然後立即跳回，以便div頂部隱藏在標題後面。您可以從代碼中移除上面的代碼，除非URL不再改變以反映用戶在頁面上的位置，否則一切都會很好。

如果你想改變網址（我認爲這對於可用性來說是一個好主意），那麼你所要做的就是改變錨點div的CSS。爲padding-top添加正值，爲margin-top添加負值。例如：

#anchor-name { 
padding-top: 70px; 
margin-top: -70px; 
} 

我只有3個div，所以我只是插入那個CSS給他們每個人，瞧，一切正常。但是，如果你有很多錨定div，你可以考慮創建一個.anchor類，把CSS放在那裏，然後把類應用到所有合適的div。

我希望這有助於！

Answer 2

我有固定的這樣一種問題，用下面的代碼：

工作演示HERE。您可以使用邊欄中的「帖子主題」部分以及主內容區域中的內容進行遊戲。

代碼

jQuery(function() { 
    jQuery('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 

     var target = jQuery(this.hash); 
     target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     jQuery('html,body').animate({ 
      scrollTop: target.offset().top -100 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 

Answer 3

參考https://codepen.io/pikeshmn/pen/mMxEdZ

方法：我們得到使用的document.getElementById（ '頭'）固定資產淨值的高度的offsetHeight 和偏移滾動。到這個值。

var jump=function(e){ 

e.preventDefault();      //prevent "hard" jump 
    var target = $(this).attr("href");  //get the target 

     //perform animated scrolling 
     $('html,body').animate(
     { 
      scrollTop: $(target).offset().top - document.getElementById('header').offsetHeight - 5 //get top-position of target-element and set it as scroll target 
     },1000,function()     //scrolldelay: 1 seconds 
     { 
      location.hash = target;   //attach the hash (#jumptarget) to the pageurl 
     }); 
     } 

    $(document).ready(function() 
    { 
    $('a[href*="#"]').bind("click", jump); //get all hrefs 
    return false; 
    });