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>

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


话题相关文章

话题标签

jQueryJavaScript

一极乐 为乐趣而生

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

谁来过

寒叶邀请你对本文不足说出你的看法!

有 9 条评论

  1. 寒叶 寒叶

    是的!

  2. 黄先生 黄先生

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

  3. 黄先生 黄先生

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

  4. 寒叶 寒叶

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

  5. 心情去旅行 心情去旅行

    这个有点意思哟

添加新评论

captcha




博主推荐专题

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


关闭

标签云

一极乐 衷心接受你的建议

TOP