• JQuery实现锚点平滑滚动


         一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现这个效果:

    比如,这里我们将通过点击<a>标签跳转到 id为content的指定位置那里。

    <a id="turnToContent" href="#content"></a>

    然后呢,就在我们想要的位置设置id为content的内容块,这里用一个div模拟一篇不像文章的文章。最好将此div放在靠后的位置,这样效果就很明显一点,如果只是测试一下这个效果,可以用简单粗暴的方法,在其前面放很多个<p>标签即可。

    <div id="content">
           <h2>
                  <a href="###">HTML5</a>
          </h2>
          <p>
                 html5html5html5
          </p>
          <p class="addMes">标签:&nbsp;<span>HTML5</span><small>2015年4月19日</small></p>
    </div>

    最后就是用JQuery来实现平滑过渡的效果了:

    $('#turnToContent').click(function () {
                $('html, body').animate({
                    scrollTop: $($.attr(this, 'href')).offset().top
                }, 500);
                return false;
    });

    搞定了!微笑

  • 相关阅读:
    CSS对 网页进行布局
    myeclipse配置tomcat服务器
    JDBC链接数据库
    java集合框架
    java日期操作
    二叉树的最近公共祖先
    二叉树的深度
    飞地的数量
    岛屿数量
    岛屿的最大面积
  • 原文地址:https://www.cnblogs.com/jr1993/p/4441169.html
Copyright © 2020-2023  润新知