Question

$('#skip-intro').on("click", function() {
  var header = $('.navbar').innerHeight();
  $("html, body").animate({
    scrollTop: $('#intro').offset().top - header
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#intro" id="skip-intro">Get to Know</a>
<div class="section-block" id="intro">
  ----content------
</div>

在这里，请帮助我找出为什么向下移动到以下部分时动画属性无法正常工作的原因。

Answer 1

原文为Find it here（但这是德语）

$('a[href*="#"]').on('click',function(e) {
 e.preventDefault();
 var target = this.hash;
 var $target = $(target);
 $('html, body').stop().animate({
  'scrollTop': $target.offset().top
 }, 900, 'swing', function () {
  window.location.hash = target;
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#exp">Href</a>
<div style="height:1000px; background:red;"></div>
<div id="exp" style="background:green; text-align:center;">jdaslkasd</div>

Answer 2

请像这样使用它。

<header class = 'navbar'>test</header>
<a href="#intro" id="skip-intro">Get to Know</a>
<div class="section-block" id="intro" style = "margin-top: 300px;">
----content------
</div>

脚本

<script>
 $(document).ready(function() {
 $('#skip-intro').on("click", function(){
        var header = $('.navbar').innerHeight();
    console.log(parseInt($('#intro').offset().top) - parseInt(header))
        $("html, body").animate({ scrollTop: parseInt($('#intro').offset().top) - parseInt(header) }, 1000);
    });
  });

</script>

请注意，为了将动画滚动到某个div位置，它应该在该位置以进行滚动工作，因为您的HTML div section块已经在顶部，因此它不会像当前那样进行动画处理在该位置上可见。

在JS的同一页面中移至新部分时进行动画处理

2 个答案: