jQuery滚动动画到一个特定的位置

Question

我想滚动动画到一个特定的位置，当点击navbar主题。该动画确实有效，但当点击某个主题时，导航栏会向下滚动，并将其自身定位为高一点或低一点，但不完全位于该顶部。 如何解决这个问题？

我的代码如下所示：

$(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

想通了最后。导航栏高度是我在代码中缺少的。

> var navHeight= $('#navi').height(); 
> $('.nav-container').height(navHeight); 

Answer 2

更改填充顶部距顶部一次尝试

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

像这样

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