使用平滑的滚动片段，页面中的中心元素

Question

我正在使用这个脚本。

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

除了一件事之外，它运作良好。当我单击锚点并向下滚动时，文本的一半被切断。我想制作一个偏移或其他东西，所以在文本上方的屏幕顶部有一个小空格，如下所示：

目前，它看起来像这样：

Answer 1

尝试类似：

scrollTop: target.offset().top - target.height()

在顶部留出一点空间......

或你可以做一些事情（不确定，需要测试）：

var video = target.next() // considering that is the video block
var centerizeHeight = $(window).height() - (target.height() + video.height()) 
centerizeHeight = (centerizeHeight > 0) centerizeHeight : 1
//...
scrollTop: target.offset().top - (centerizeHeight/2) 

注意：请确保您的文档类型位于您的页面中