zoukankan      html  css  js  c++  java
  • 返回顶部

    <body>
        <div class="go-top">
            <div class="arrow"></div>
            <div class="stick"></div>
        </div>
        ...
    </body>
    

    重点是go-top的CSS定义:

    div.go-top {
        display: none;
        opacity: 0.6;
        z-index: 999999;
        position: fixed;
        bottom: 113px;
        left: 90%;
        margin-left: 40px;
        border: 1px solid #a38a54;
         38px;
        height: 38px;
        background-color: #eddec2;
        border-radius: 3px;
        cursor: pointer;
    }
    
    div.go-top:hover {
        opacity: 1;
        filter: alpha(opacity=100);
    }
    
    div.go-top div.arrow {
        position: absolute;
        left: 10px;
        top: -1px;
         0;
        height: 0;
        border: 9px solid transparent;
        border-bottom-color: #cc3333;
    }
    
    div.go-top div.stick {
        position: absolute;
        left: 15px;
        top: 15px;
         8px;
        height: 14px;
        display: block;
        background-color: #cc3333;
        -webkit-border-radius: 1px;
        -moz-border-radius: 1px;
        border-radius: 1px;
    }
    

    使用fixed定位,让按钮始终出现在右下角,通过设定left:90%可以使按钮在右方出现,但又不会太紧贴滚动条。

    按钮默认不可见,当滚动页面到一定高度后,按钮出现,这里用jQuery实现,代码相当简单:

    $(function() {
        $(window).scroll(function() {
            if ($(window).scrollTop() > 1000)
                $('div.go-top').show();
            else
                $('div.go-top').hide();
        });
        $('div.go-top').click(function() {
            $('html, body').animate({scrollTop: 0}, 1000);
        });
    });
    

    当按下按钮时,有动画效果返回顶部。

  • 相关阅读:
    WCF使用net.tcp寄宿到IIS中
    (转)Dubbo 简单Dome搭建
    Linux压缩解压
    Linux关闭开启防火墙命令
    简单登录(jsp+servlet)
    UVa 10285 Longest Run on a Snowboard [DP]
    UVa 1218 Perfect Service [DFS+DP]
    第三届ACM山东省赛 Pick apples [贪心+动规]
    ZOJ 3326
    HDU 1029
  • 原文地址:https://www.cnblogs.com/duanqiao123/p/8493517.html
Copyright © 2011-2022 走看看