javascript - 使用平滑滚动片段，将元素置于页面中心

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;
      }
    }
  });
});

除了一件事之外，它运行良好。当我单击 anchor 并向下滚动时，一半的文本被切断。我想进行偏移或其他操作，因此屏幕顶部的文本上方有一点空白，如下所示:

目前，它看起来像这样:

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) 

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