zoukankan      html  css  js  c++  java
  • jquery实现返回页面顶部功能。

    <p id="back-to-top">
        <span></span>
    </p>
    <script type="text/javascript">
        $(function() {
            //首先将#back-to-top隐藏
            $("#back-to-top").hide();
            //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
            $(function() {
                $(window).scroll(function() {
                    if ($(window).scrollTop() > 100) {
                        $("#back-to-top").fadeIn(1500);
                    } else {
                        $("#back-to-top").fadeOut(1500);
                    }
                });
                //当点击跳转链接后,回到页面顶部位置
                $("#back-to-top").click(function() {
                    $('body,html').animate({
                        scrollTop : 0
                    }, 300);
                    return false;
                });
            });
        });
    </script>
    <style type="text/css">
    p#back-to-top {
        position: fixed;
        bottom: 100px;
        right: 80px;
        cursor:pointer;
    }
    
    p#back-to-top  span {
        background:url(skins/images/totop.gif) no-repeat center center;
        border-radius: 6px;
        display: block;
        height: 80px;
         80px;
        margin-bottom: 5px;
        /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
        -moz-transition: background 1s;
        -webkit-transition: background 1s;
        -o-transition: background 1s;
    }
    
    #back-to-top span:hover {
        background: url(skins/images/totop.gif) no-repeat center center;
    }
    </style>

    不要忘记引入jquery库

  • 相关阅读:
    每日一个设计模式之策略模式
    Java发送get和post请求
    sql分组取最大值
    解析xml
    jsp:include
    schema的详解2
    文法和语言
    高级语言程序简介
    Dataframe根据某一列的值获取满足条件的行的其他列的值
    Dataframe数值转为二维列表
  • 原文地址:https://www.cnblogs.com/xusir/p/3410577.html
Copyright © 2011-2022 走看看