如何设置平滑滚动的偏移量

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

CSS 滚动边距或填充

不再需要 JavaScript。

/* Scroll to 2rem above the target */
:target {
  scroll-margin-top: 2rem;
}

/* Bonus for a smooth scrolling experience */
body {
  scroll-behavior: smooth;
}

在 MDN 上阅读有关滚动边距和滚动填充的更多信息。