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

Question

我已經在我的網站上實現了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

這總是發生。 我搜索並搜索答案，感到沮喪，發布問題尋求幫助，然后立即找到問題的答案。 愚蠢。 無論如何，對於可能遇到同樣問題的人來說，這是解決方案。

例如，如果要將偏移量更改為70px，請將代碼更改為：

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

但是，除非您從代碼中刪除此行...

location.hash = target;

...頁面將滾動到正確的位置，然后立即向上跳回，以便div的頂部隱藏在標題后面。 您可以從代碼中刪除上述行，除了URL不再更改以反映用戶在頁面上的位置這一事實外，一切都會很好用。

如果您希望更改URL（我認為這對於可用性目的而言是個好主意），那么您所要做的就是更改錨點div的CSS。 為padding-top添加正值，為margin-top添加負值。 例如：

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

我只有3個div，所以我只是為每個人插入了CSS，瞧，一切正常。 但是，如果你有很多錨div，你可以考慮創建一個.anchor類，將CSS放在那里，並將類應用於所有適當的div。

我希望這有幫助！

Answer 2

我用下面的代碼解決了這樣一個問題：

在這里工作演示。 您可以使用側欄中的“ 帖子主題 ”部分和主要內容區域中的內容。

碼

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（'header'）獲得固定導航的高度.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;
  });

Answer 4

實際上有一個 CSS 規則： scroll-padding-top :) 當然，與常規的padding-top用於最頂部的元素。

參見 https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top