html代码平滑滚动瞄点之后高度降低

有时候我们做了瞄点之后，但是如果菜单栏有position: fixed; 这时候就尴尬了，就遮住了瞄点位置，特别影响效果，这时候我们需要通过css或者js在产生瞄点之后降低一些高度，最后我测试了几遍还是用js方便吧。

$(function(){
    $('a').click(function(){
        //根据a标签的href转换为id选择器，获取id元素所处的位置，并高度减50px（这里根据需要自由设置）
        $('html,body').animate({scrollTop: ($($(this).attr('href')).offset().top -130 )},1000);
    });
});

其中top -130这个是高度。越大越往下，可以自己修改琢磨哈。

Html代码

<!--顶部导航栏-->
<div >
    <ul>
        <li><a href="#A">A</a></li>
        <li><a href="#B">B</a></li> 
    </ul>
</div>
<!--内容区-->
<div class="container">
    <div id="A">This is A</div>
    <div id="B">This is B</div>
</div>
<!--底部-->
<div>footer</div>

方法二: 比较简单 给html加个高度

html{
  scroll-padding-top: 130px;
}	

原文链接：https://www.um80.com/1501.htm，转载请注明出处。