zoukankan      html  css  js  c++  java
  • 回到顶端的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();

  • 相关阅读:
    hdu 3790 最短路径问题
    hdu 2112 HDU Today
    最短路问题 以hdu1874为例
    hdu 1690 Bus System Floyd
    hdu 2066 一个人的旅行
    hdu 2680 Choose the best route
    hdu 1596 find the safest road
    hdu 1869 六度分离
    hdu 3339 In Action
    序列化和反序列化
  • 原文地址:https://www.cnblogs.com/lightinblack/p/3634713.html
Copyright © 2011-2022 走看看