• 仿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 }

  • 相关阅读:
    CI框架(Codeigniter)总结
    ssh自动下载SFTP文件
    数据库设计原则
    Java代码性能优化的 39个细节
    quartz定时任务时间设置
    Myeclipse 反编译工具插件
    Maven -- 使用Myeclipse创建Maven项目
    详解Java Web项目启动执行顺序
    java web项目下的lib和build path 中jar包问题解惑
    java读取存在src目录下和存在同级目录下的配置文件
  • 原文地址:https://www.cnblogs.com/dyllove98/p/3162824.html
Copyright © 2020-2023  润新知