html界面锚点平滑过渡

最新推荐文章于 2024-03-14 09:39:32 发布

Sun_0506

最新推荐文章于 2024-03-14 09:39:32 发布

阅读量1.3w

点赞数 2

分类专栏：开发问题总结文章标签：日常知识点积累

本文链接：https://blog.csdn.net/beyondsunqixin/article/details/78785085

版权

开发问题总结专栏收录该内容

2 篇文章 1 订阅

订阅专栏

<!--顶部导航栏-->
<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>

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


 
 
  
  animate（）函数用于改变div元素的高度
 
 
 
 
  
  	scrollTop（）用于设置滚动便宜