jQuery 滚动动画到特定位置

Question

我试图在点击导航栏主题时制作滚动动画到特定位置。动画确实有效，但是当单击某个主题时，导航栏会向下滚动并将自己定位在图片的上方或下方，但不完全位于图片上方。如何解决这个问题？

我的代码如下:

$(document).ready(function() {
  var navpos = $('#navi').offset().top;
  console.log(navpos.top);
  var footer_postion = $('#footie').offset().top;
  $(window).bind('scroll', function() {
    if ($(window).scrollTop() > navpos && $(window).scrollTop() < footer_postion) {
      $('#navi').addClass('fixed');
    } else {
      $('#navi').removeClass('fixed');
    }

  });


  var shp = $('.nav').height();


  $('a[href^="#"]').on('click', function(event) {
    var target = $(this.getAttribute('href'));
    if (target.length) {
      event.preventDefault();
      $('html, body').stop().animate({
        scrollTop: target.offset().top - shp
      }, 1000);
    }
  });

});

* {
  margin: 0;
  padding: 0;
}

div.container {
  background-color: rgba(225, 226, 228, 0.62);
  height: 76px;
}

h1 {
  font-family: 'Zilla Slab', serif;
  color: rgba(58, 58, 54, 0.52);
  text-align: center;
  padding-top: 17px;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
}

.nav-placeholder {
  background-color: rgba(112, 121, 130, 0.62);
  height: 25px;
  width: 1349px;
}

ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 0px;
  margin-bottom: 0px;
}

li {
  display: inline-block;
  text-decoration: none;
  list-style: none;
  margin-right: 17px;
  margin-top: 2px;
}

li a {
  text-decoration: none;
  color: black;
  font-family: 'Zilla Slab', serif;
}

.img {
  background-color: aliceblue;
}

img {
  display: block;
  margin: 0 auto;
  padding-top: 25px;
}

a:hover,
a:active {
  color: aliceblue;
}

footer.container {
  height: 900px;
  background-color: rgba(225, 226, 228, 0.62);
}

h1.end {
  font-family: 'Zilla Slab', serif;
  color: rgba(58, 58, 54, 0.52);
  text-align: center;
  padding-top: 207px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="Home">
  <h1>Photo Webshop</h1>
</div>

<div class="nav-placeholder" id="navi">
  <div class="nav">
    <ul>
      <li><a href="#Home">Home</a></li>
      <li> <a href="#Photos">Street Art</a></li>
      <li> <a href="#Veggies">Veggies</a></li>
      <li> <a href="#Berries">Berries</a></li>
      <li> <a href="#Dog">Dog</a></li>
      <li> <a href="#Beach">Beach</a></li>

    </ul>
  </div>
</div>

<div id="Berries" class="img">

  <img src="images/berries.png">

</div>

<div id="Veggies" class="img">

  <img src="images/tomato.png">

</div>

<div id="Photos" class="img">

  <img src="images/sleeper.png">

</div>

<div id="Dog" class="img">

  <img src="images/dog.png">

</div>

<div class="img">

  <img src="images/ladyfinger.png">
</div>

<div id="Beach" class="img">

  <img src="images/footie.png">

</div>


<footer class="container" id="footie">
  <div class="fixed-footer">
    <h1 class="end">Copyright &copy; All Rights Reserved.</h1>

  </div>

</footer>

谢谢。

Answer 1

将 padding top 更改为 margin top 一次并尝试

img {
  display: block;
  margin: 0 auto;
  padding-top: 25px;
}

像这样

img {
  display: block;
  margin: 0 auto;
  margin-top: 25px;
}