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库

  • 相关阅读:
    Python从入门到精通系列文章总目录
    使用465端口加密发邮件
    kubernetes学习14—Dashboard搭建和认证
    kubernetes学习01—kubernetes介绍
    CSS基础
    SVN 命令行的使用
    Python判断字符集
    Flask框架(2)-JinJa2模板
    搭建ntp服务器
    Ansible的Playbook的编写
  • 原文地址:https://www.cnblogs.com/xusir/p/3410577.html
Copyright © 2011-2022 走看看