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

    页面较长时,使用返回顶部按钮比较方便,在电商中必备操作。下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可。

    $(function () {
        $("body").append($("<div id='totop'></div>"));
        $("#totop").hide();
        $(window).scroll(function () {
            if ($(window).scrollTop() > 100) {
                $("#totop").fadeIn(500);
            }
            else {
                $("#totop").fadeOut(500);
            }
        });
        $("#totop").click(function () {
            $('body,html').animate({ scrollTop: 0 }, 100);
            return false;
        });
        window.onload = function () {
            $(window).scroll();
        };
    });

     css:

    /*回到顶部*/
    #totop{
        background:url(/themes/default/images/top_bg.png) no-repeat left top;
        40px ;height:40px;
        position:fixed;
        left:50%;bottom:20%;
        margin-left:605px;
    }
    #totop:hover{
        background:url(/themes/default/images/top_bg.png) no-repeat left -40px;
        cursor:pointer
    }
  • 相关阅读:
    【排序】题解_P1093奖学金
    简单了解连接服务器的要求
    centos7安装(纯文字版)
    JAVA虚拟机
    集合
    IO流
    反射
    多线程
    JAVA基础
    博客园皮肤文档
  • 原文地址:https://www.cnblogs.com/lunawzh/p/5404025.html
Copyright © 2011-2022 走看看