zoukankan      html  css  js  c++  java
  • 网页返回顶部之animate方法

    点击返回顶部按钮,页面滑动形式回到顶部!

    HTML代码:

    <div id="ctop">回到<br>顶部</div>

    CSS代码:

    #ctop{45px; height:45px; position: fixed; left:50%; bottom:120px; border:solid 1px #ccc; background: #fff; margin-left: 600px; text-align: center; line-height: 22px;cursor: pointer; display: none;font-size: 12px; color: #999}

    JavaScript代码:

    //点击回到顶部

      $("#ctop").click(function(){
            $("html,body").animate({scrollTop:'0px'},300)
      })
    //判断元素在网页下滑多少像素时显示
          $(window).bind('scroll',function(){
              var len=$(this).scrollTop()
              if(len>=500){
                   $('#ctop').fadeIn(500);
              }else{
                   $('#ctop').fadeOut(200);
              }
          });
  • 相关阅读:
    HTML学习笔记Day16
    HTML学习笔记Day15
    HTML学习笔记Day14
    三角形
    三级菜单
    开关制作源代码
    HTML标签
    弹性盒模型
    怪异盒模型
    实验7:Problem F: STL——字典
  • 原文地址:https://www.cnblogs.com/studycc/p/6086261.html
Copyright © 2011-2022 走看看