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

     
    //Html代码
    <div class="backToTop" title="返回顶部">返回顶部</div>
    //代码
    //CSS代码
    .backToTop {    display: none;     18px;    line-height: 1.2;
        padding: 5px 0;
        background-color: #000;
        color: #fff;
        font-size: 12px;
        text-align: center;
        position: fixed;
        _position: absolute;
        right: 10px;
        bottom: 100px;
        _bottom: "auto";
        cursor: pointer;
        opacity: .6;
        filter: Alpha(opacity=60);
    }
    //JS代码:
    (function() {
    
        var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body"))
            .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
                $("html, body").animate({ scrollTop: 0 }, 120);
        }), $backToTopFun = function() {
            var st = $(document).scrollTop(), winh = $(window).height();
            (st > 0)? $backToTopEle.show(): $backToTopEle.hide();    
            //IE6下的定位
            if (!window.XMLHttpRequest) {
                $backToTopEle.css("top", st + winh - 166);    
            }
        };
        $(window).bind("scroll", $backToTopFun);
        $(function() { $backToTopFun(); });
    })();

    jin 2011-2014
  • 相关阅读:
    PHP编码规范-笔记
    MySQL
    烧毁的诺顿
    页面查询案例(使用redis数据库)
    非关系型数据库-redis
    校验用户名是否存在
    使用Cookie实现浏览器显示上次登录时间
    Java文件下载
    随机验证码生成
    Response对象
  • 原文地址:https://www.cnblogs.com/hongtian/p/3200242.html
Copyright © 2011-2022 走看看