如何设置Offsett的平滑滚动(How to Set Offsett for Smooth Scr

我已经实现了CSS技巧平滑滚动页面上我的网站，它的工作非常好听。但是，因为我在页面的顶部，有一个固定的资产净值时，页面滚动到合适的锚股利，股利的顶部导航身后消失。我怎样才能抵消滚动（约70像素），以便显示整个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:

这总是会发生的。我搜索和搜索的答案，感到沮丧，张贴问题，寻求帮助，然后立即找到一个答案我的问题。愚蠢。不管怎样，下面是谁可能有同样的问题任何解决方案。

如果你想改变由70像素的偏移量，例如，代码改成这样：

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

但是，除非你删除了这行代码...

location.hash = target;

...页面将滚动到正确的位置，因此该div的顶部被隐藏在头之后，然后立即跳回。您可以删除从上面一行代码，一切都将工作的伟大，除了一个事实，即URL将不再改变，以反映用户在网页上的位置。

如果你想要的网址改变（我认为这是对可用性的目的是一个好主意），那么所有你需要做的是改变CSS为锚的div。添加填充顶部和边距为负值正值。例如：

#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（“头”）的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;
  });

文章来源: How to Set Offsett for Smooth Scroll