点击导航栏页面滚动到指定显示位置---animate动画

最新推荐文章于 2023-04-26 18:37:53 发布

wcy7916

最新推荐文章于 2023-04-26 18:37:53 发布

阅读量4.8k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/wcy7916/article/details/80177866

版权

CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

animate动画

example:

html:

<ul>
     <li class="head_nav_li" data-value="index">
         <a href="###" class="product_li_a" onclick="body_scroll('top')">aaaa</a>
    </li>
   <li id="product" class="head_nav_li" onclick="body_scroll('pro_fun_w')" data-value="product">
            <a href="###" class="product_li_a">bbbb</a>
    </li>
</ul>

js:

function body_scroll(obj){
     if( obj=='top' ){
       $('html,body').animate({
             scrollTop: 0
       },1000);
      return false;
}else{
     var targetOffset=($('#'+obj).offset().top)-64;
      $('html,body').animate({
         scrollTop: targetOffset
      },1000);
  }
}