jQuery点击平滑滚动到顶部或指定id及class

平滑滚动到页面顶部和页面指定位置js

  <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
  <script>
$(document).ready(function(){

  $(".gotop").click(function(){
    $(document.body).animate({'scrollTop':0},100);
  });
    //滚动到顶部

  $(".gotags").click(function(){
    $(document.body).animate({scrollTop: $('#tags').offset().top}, 1000);
  });
    //滚动到id为tags元素所在位置

});
  </script>

以上代码通过点击class为gotop的元素平滑滚动到页面顶部,点击class为gotags的元素时平滑滚动到id为tags的元素所在位置。

被点击的元素可以是a标签,button标签,span标签,div等任意标签,被滑动指定id所在位置也可以是任意标签,当然也可以按jQuery选择器的写法指定其他class或者tag。

模拟页面HTML结构DEMO

<div class="header">
  这里是页面头部
    <button class="gotags">找到标签的位置</button>
</div>
    
<div class="content" style="height:999px; background: #cecece">
这里是页面内容
</div>

<div id="tags">
  这里是页面标签
    <button class="gotop">滚回顶部</button>
</div>

转载请注明转自:一极乐http://yijile.com/log/501.html


话题相关文章

话题标签

jQueryJavaScript

一极乐 为乐趣而生

《jQuery点击平滑滚动到顶部或指定id及class》  发表时间:  最后更新时间:

谁来过

不知子曰邀请你对本文不足说出你的看法!

有 5 条评论

  1. 不知子曰

    是的!

  2. 黄先生

    用在跳转至指定标签较有用

  3. 黄先生

    这个是固定的 浮动的体验好一些

  4. 不知子曰

    代码比较简练 效果却不平庸

  5. 心情去旅行

    这个有点意思哟




博主推荐专题

佛学资料Typecho模版代码乐知道CSS百度CyanogenMod
搜索引擎提交入口言辞


关闭

标签云

一极乐 衷心接受你的建议

TOP