Question

我已经多次看过这个问题了，但是这个例子都被打破了，或者我无法让它发挥作用。

我有一个固定在页面顶部的粘性导航栏。有一个锚点链接可以将页面滚动到该位置。它可以工作，但是当它需要被粘性导航的高度偏移时。

我在px中设置了一个高度，并尝试在变量中获得高度。控制台告诉我它正在获得正确的高度。但它不是在计算它或用它做任何事情。或许它并没有得到正确实施。

如果有人能说出一些亮点，那就是王牌！

这是JSFiddle：

var $root = $('html, body');
var offset = $('#sticky-header').outerHeight();
$('a.anchor').click(function() {
  $root.animate({
    scrollTop: $($.attr(this, 'href')).position().top - offset
  }, 500);
  return false;
});

#sticky-header {
  width: 100%;
  background-color: gray;
  color: white;
}

#bigdiv {
  height: 1000px;
  background-color: white;
}

#bigdiv2 {
  height: 1000px;
  background-color: purple;
}

#reservations {
  height: 40px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sticky-header" style="position: fixed; top: 0px;">
  <p>
    some textxt
    <a href="#anchor">ANCHOR BUTTON</a>
  </p>
</div>

<div id="bigdiv"></div>

<div id="anchor">
  reservation text
</div>

<div id="bigdiv2"></div>

Answer 1

点击功能中的选择器a.anchor错误。我对您的代码进行了一些更改，现在看看它是否正常工作：

＆＃13;

var $root = $('html, body');
var offset = $('#sticky-header').outerHeight();
$('#hrefScroll').click(function() {
     var targetName = $(this).attr("href")
     var targetOffset = $(targetName).offset().top-offset
     $root.animate({
                scrollTop: targetOffset
      }, 1000)
        return false;
});

＆＃13;

#sticky-header {

  width: 100%;
  background-color: gray;
  color: white;
}
#bigdiv {
  height: 1000px;
  background-color: white;
}
#bigdiv2 {
  height: 1000px;
  background-color: purple;
}
#reservations {
  height: 40px;
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sticky-header" style="position: fixed; top: 0px;">
<p>
some textxt
<a href="#anchor" id="hrefScroll">ANCHOR BUTTON</a>
</p>
</div>

<div id="bigdiv"></div>

<div id="anchor">
  reservation text
</div>

<div id="bigdiv2"></div>

＆＃13;

jQuery滚动页面偏移不起作用

1 个答案: