• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    仿CSDN Blog返回页面顶部功能实现原理及代码
    只修改了2个地方:
    ,返回的速度-->改成了慢慢回去。(原来是一闪而返回)
    ,返回顶部图标出现的时机-->改成了只要不在顶部就显示出来。(原来是向下滚动500px后才显示)

    注意:JS务必要写在 Html之后;
    HTML

    复制代码
    代码如下:

    <div id="d-top" style="display:none;">
    <a id="d-top-a" href="#" title="回到顶部">
    <img src="http://static.blog.csdn.net/images/top.png" alt="TOP" /></a>
    </div>

    Javascript代码

    复制代码
    代码如下:

    <script type="text/javascript">
    $(function(){
    var d_top=$('#d-top');
    document.onscroll=function(){
    var scrTop=(document.body.scrollTop||document.documentElement.scrollTop);
    if(scrTop>500){
    if(scrTop>0){
    d_top.show();
    }else{
    d_top.hide();
    }
    }
    $('#d-top-a').click(function(){
    $("html,body").animate({scrollTop: 0},500);
    //scrollTo(0,0);
    this.blur();
    return false;
    });
    });
    </script>

    CSS样式

    复制代码
    代码如下:

    #d-top {
    position: fixed;
    float: right;
    z-index: 10;
    right: 10px;
    bottom: 40px;
    }
    #d-top img {
    width: 42px;
    opacity: 0.3;
    }
    img {
    border: medium none;
    }
    上一篇:Html5实现iPhone开机界面示例代码
    下一篇:html5 CSS过度-webkit-transition使用介绍
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    仿CSDN Blog返回页面顶部功能实现原理及代码 仿,CSDN,Blog,返回,页面,顶部,