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,转载请注明出处。

0
金秋上云特惠新人专享

评论0

本站所有素材,站长均亲自测试过,可放心使用,有什么问题联系我们!18091738064(微信)
没有账号? 注册  忘记密码?

社交账号快速登录

Copyright   ©2017-2024  U码80  陕ICP备17013443号-1  

陕公网安备 61032402000158号