zoukankan      html  css  js  c++  java
  • 仿CSDN Blog返回页面顶部功能

    只修改了2个地方:

    1,返回的速度-->改成了慢慢回去。(原来是一闪而返回)

    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样式

    354 #d-top {
    355     position: fixed;
    357     float: right;
    358     z-index: 10;
    359     right: 10px;
    360     bottom: 40px;
    361 }
    362 #d-top img {
    363     42px;
    364     opacity: 0.3;
    365 }
    366 img {
    367     border: medium none;
    368 }

  • 相关阅读:
    android 中 文件的 MIME 类型 【部分内容】
    Linux下的计划任务 crontab
    监控 某个目录下文件的创建,给据创建的文件进行执行命令
    SUSE下试着搭建了一个web 做个记录
    Android 学习 — Activity
    数据库字段不规范
    浅谈测试团队规范建设
    QA拒绝上线的理由
    Bugzilla安装部署精要
    Linux下部署Bugzilla和TestLink
  • 原文地址:https://www.cnblogs.com/dyllove98/p/3162824.html
Copyright © 2011-2022 走看看