zoukankan      html  css  js  c++  java
  • 返回top写法技巧

    HTML
    <
    a href="#" class="fixed">top</a>

    CSS:

    .fixed{
        padding: 20px 15px;
        text-transform: uppercase;
        position: fixed;
        left:50%;
        bottom: 60px;
        margin-left: 475px;      //为总的main容器的宽度/2再加上10px。
        background-color: #000;
        font: normal bold 17px;
        color: #fff;
    }

    这样做的目的是在不同的分辨率下都能正常。

    <script type="text/javascript">  
    function goTop()  
    {  
        $(window).scroll(function(e) {  
            //若滚动条离顶部大于100元素  
            if($(window).scrollTop()>100)  
                $("#gotop").fadeIn(1000);//以1秒的间隔渐显id=gotop的元素  
            else  
                $("#gotop").fadeOut(1000);//以1秒的间隔渐隐id=gotop的元素  
        });  
    };  
    $(function(){  
        //点击回到顶部的元素  
        $("#gotop").click(function(e) {  
                //以1秒的间隔返回顶部  
                $('body,html').animate({scrollTop:0},1000);  
        });  
        $("#gotop").mouseover(function(e) {  
            $(this).css("background","url(images/backtop2013.png) no-repeat 0px 0px");  
        });  
        $("#gotop").mouseout(function(e) {  
            $(this).css("background","url(images/backtop2013.png) no-repeat -70px 0px");  
        });  
        goTop();//实现回到顶部元素的渐显与渐隐  
    });  
    </script>  
  • 相关阅读:
    #include <utility>
    Html的空格显示
    ExtJs自学教程(1):一切从API開始
    天黑的时候,我又想起那首歌
    citrix协议ICA技术原理
    约瑟夫环问题
    数据结构和算法设计专题之---八大内部排序
    HDU
    深入分析C++引用
    八大排序算法总结
  • 原文地址:https://www.cnblogs.com/qianduanjingying/p/5001166.html
Copyright © 2011-2022 走看看