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 }

  • 相关阅读:
    连接数据库修改篇
    连接数据库
    get和post
    php连接mysql
    AJAX基础!
    JAVAsrcipt总结!
    使用AJAX如何得到数据库当中的值!
    AJAX如何做出输入框提示!
    PHP数据连接主键与外键!
    JAVA当中内存管理与垃圾回收!
  • 原文地址:https://www.cnblogs.com/dyllove98/p/3162824.html
Copyright © 2011-2022 走看看