0712-2888027 189-8648-0214
微信公众号

孝感风信信息技术有限公司微信公众号

当前位置: 主页 > 技术支持 > Javascript/JQuery > JQuery实现<a>标签平滑滚动到指定节点位置代码片段

JQuery实现<a>标签平滑滚动到指定节点位置代码片段

时间:2018-07-12来源:风信网 点击:
JQuery实现<a>标签平滑滚动到指定节点位置代码片段

风信建站项目开发过程中应用到使用animate动画函数实现<a>标签平滑滚动到指定节点位置,这种效果比起使用scroll到指定地点,用户在体验中会感觉更平滑,当然两种方法各有所长,分享项目实战片段代码如下:

HTML代码:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-1 navbar-fixed-top">
            <h1 class="logo"><a href="">​快乐校外</a></h1>
        </div>
        <div class="col-lg-8 col-md-offset-3">
            <ul id="navmenu">
                <li><a href="/" title="首页">​首页</a></li>
                <li><a href="#teacher" class="topLink" title="​浏览教师">​浏览教师</a></li>
                <li><a href="/" title="开始约课">​开始约课</a></li>
                <li><a href="#process" class="topLink" title="上课流程">​上课流程</a></li>
                <li><a href="/" title="最新动态">最新动态</a></li>
            </ul>
        </div>
    </div>
</div>   

JQuery代码:

$(document).ready(function() {
  $("#navmenu li a.topLink").click(function() {
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top + "px"
    }, {
      duration: 1000,
      easing: "swing"
    });
    return false;
  });
});

效果截图如下:
JQuery实现<a>标签平滑滚动到指定节点位置代码片段
JQuery实现<a>标签平滑滚动到指定节点位置代码片段
栏目列表
推荐内容
热点内容
展开