• 回到顶端的jquery


    现在的淘宝啊,京东啊,各种网站都有一个功能,有一个按钮,在页面最顶端的时候不会显示,当往下拉到一定的时候会出现。点击他会直接跳到页面的顶端。代码如下:

    html代码:

    <div id="top">
            <p id="back-to-top"><a href="#top"><span><img src="images/gotop.jpg"></span>返回顶部</a></p>
    </div>

    css代码:

    p#back-to-top{position:fixed;display:none;bottom:100px;right:10px;overflow: hidden;}
    p#back-to-top a{text-align:center;text-decoration:none;color:#d1d1d1;display:block;-moz-transition:color 1s;-webkit-transition:color 1s;-o-transition:color 1s;overflow: hidden;}
    p#back-to-top a:hover{color:#979797;}
    p#back-to-top a span{display:block;height:50px;50px;margin-bottom:5px;-moz-transition:background 1s;-webkit-transition:background 1s;-o-transition:background 1s;}
    #back-to-top a:hover span{overflow: hidden;}
    #back-to-top a span img{border:none; 50px;height: 50px;}

    jquery代码:

    /*top特效*/
            $.fn.smartFloat = function() {
                var position = function(element) {
                    var top = element.position().top, pos = element.css("position");
                    $(window).scroll(function() {
                        var scrolls = $(this).scrollTop();
                        if (scrolls > top) {
                            if (window.XMLHttpRequest) {
                                element.css({
                                    position: "fixed",
                                    top: 0
                                });
                            } else {
                                element.css({
                                    top: scrolls
                                });
                            }
                        }else {
                            element.css({
                                position: "absolute",
                                top: top
                            });
                        }
                    });
                };
                return $(this).each(function() {
                    position($(this));
                });
            };
            //绑定
            $("#down").smartFloat();

  • 相关阅读:
    FR #3题解
    L3-005. 垃圾箱分布
    L2-004. 这是二叉搜索树吗?
    L2-002. 链表去重
    L1-009. N个数求和
    L3-003. 社交集群
    L3-004. 肿瘤诊断
    L2-001. 紧急救援
    L3-002. 堆栈
    L2-007. 家庭房产
  • 原文地址:https://www.cnblogs.com/lightinblack/p/3634713.html
Copyright © 2020-2023  润新知