Jquery平滑滚动偏移答案

【问题标题】：Jquery Smooth Scrolling OffsetJquery平滑滚动偏移
【发布时间】：2011-10-08 12:41:36
【问题描述】：

我正在制作一个单页网站，在中心顶部有粘性导航，宽度约为 1000 像素，高度约为 20-25 像素，现在我还包括平滑滚动功能，但我的问题是每当页面滚动到它的活动页面时，标题隐藏在粘性导航下，我如何获得粘性导航底部的偏移量？谢谢。

顺便说一句，这是js代码：

$('a').click(function(e) {
        var target = $(this).attr('href');
        e.preventDefault();

        $('html,body').animate({
            scrollTop: $(target).offset().top
        }, 800, 'easeInOutCirc');
    });

【问题讨论】：

标签： jquery smooth-scrolling

【解决方案1】：

保持当前代码不变并将该偏移量添加到网站顶部的最简单方法是在 .top 之后添加所需的偏移量值，如下所示：

$('a').click(function(e) {
    var target = $(this).attr('href');
    e.preventDefault();

    $('html,body').animate({
        scrollTop: $(target).offset().top - 20
    }, 800, 'easeInOutCirc');
});

希望这个答案没有上一个那么复杂。 :)

【讨论】：

【解决方案2】：

jQuery 的.position() 方法将为您提供元素相对于页面的顶部和左侧偏移量。所以你只需要将粘性导航的.outerHeight() 添加到它的.position().top 值。

这是一个例子：http://jsfiddle.net/NUfaZ/1/

当您在页面中向下滚动时，您会看到它的位置已更新。

【讨论】：

err 对不起，但我应该把它放在哪里或应该如何放置？我对 js 真的很陌生。谢谢。
我已经编辑了我的答案，既包括一个例子，也更正一个错误：jQuery 没有 '.pos()' 方法——它被称为 '.position()' .
好的，现在我得到了 outerHeight，它是“20”。但是我在哪里把这个“20”放在我的代码上？我在 scrollTop 上试过：$(target).offset({top:20}).top。但它并没有平滑滚动。非常感谢！
你没有把 20 放进去，outerHeight 会为你计算你的变量。看看他的例子
吉姆——我很难理解你上次评论中的问题。如果您可以创建一个 jsFiddle，那将非常有帮助。

【解决方案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;
  });

PS：

它包括标题和目标之间 5 像素的漂亮差异
滚动效果不硬，比较流畅；平滑滚动

【讨论】：