heartAndthink的博客

Standing on Shoulders of Giants

JS页面锚点滑动

//主页面

<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;
  });


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/heartAndthink/article/details/53994391
文章标签: jquery js
想对作者说点什么? 我来说一句

滑动锚点,强大的锚点js

2011年09月30日 2KB 下载

没有更多推荐了,返回首页

不良信息举报

JS页面锚点滑动

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭