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();

  • 相关阅读:
    程序员需要看的书
    linux常见命令实践.
    数据库使用简单总结
    剑指offer【书】之简历抒写
    面试中自己项目和你应该问的问题环节总结
    Matlab近期用到的函数(持续更新)
    排序-快速排序算法
    系统运维-hub, repeater, switch, router初览
    C++基础-位运算
    排序-冒泡排序
  • 原文地址:https://www.cnblogs.com/lightinblack/p/3634713.html
Copyright © 2011-2022 走看看