关闭

JS页面锚点滑动

标签: jquery js
144人阅读 评论(0) 收藏 举报

//主页面

<html>

<head>

</head>

<body>

<div id='s_1' ></div>

<div id='s_2' ></div>

<div id='s_3' ></div>

<div id='s_4' ></div>

</body>

</html>


<!--左侧边栏-->
<div class="scrollBar">
<div class="scroll_item">
<a class="common_scroll scroll_1 scroll_now" href="#s_1">
<span class="icon iconfont">&#xe613;</span>
<span class="text">基本情况</span>
</a>
<a class="common_scroll scroll_2" href="#s_2">
<span class="icon iconfont">&#xe633;</span>
<span class="text">个人信息</span>
</a>
<a class="common_scroll scroll_3" href="#s_3">
<span class="icon iconfont">&#xe600;</span>
<span class="text">服务对比</span>
</a>
<a class="common_scroll scroll_4" href="#s_4">
<span class="icon iconfont">&#xe62e;</span>
<span class="text">作品对比</span>
</a>
<a class="common_scroll scroll_5" href="#s_5">
<span class="icon iconfont">&#xe6c1;</span>
<span class="text">经历对比</span>
</a>
</div>

</div>


JS


$(".common_scroll").click(function() {
var h=$($(this).attr("href")).offset().top;
    $("html, body").stop(true,false).animate({
      scrollTop: h +"px"
    }, {
    duration: 500,
      easing: "swing"
    });
    return false;
  });


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:15776次
    • 积分:777
    • 等级:
    • 排名:千里之外
    • 原创:61篇
    • 转载:9篇
    • 译文:2篇
    • 评论:0条
    文章分类