zoukankan      html  css  js  c++  java
  • jQuery返回顶部(精简版)

    jQuery返回顶部(精简版)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery返回顶部</title>
        <style>
        *body{ background-attachment: fixed; background-image: url(about:blank); /* 必须的,防抖动 */}
        *body #toTop{ position: absolute; top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-10)); /* 底部固定悬浮 */}
        #toTop{ display: none; position: fixed; border: 1px solid red; right: 10px; bottom: 10px; padding: 10px 0; cursor: pointer;}
        </style>
    </head>
    <body style="height:3000px;">
        <div id="toTop"> scroll to top</div>
        
        <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
        <script>
        $(function(){
            var toTop = $('#toTop');
    
            // 当窗口滚动条滚动时触发
            $(window).scroll(function(){
                var st = $(window).scrollTop();        //获取浏览器窗口向上滚动的距离
                
                // 选项卡标签栏/控制台调试代码
                // document.title = $(window).scrollTop();
                // console.log($(window).scrollTop());
    
                // 判断向上滚动距离是否大于500
                if(st<500){
                    toTop.fadeOut('fast');
                }else{
                    toTop.fadeIn('fast');
                }
            });
            // 当点击按钮时触发
            toTop.click(function(){
                $('html ,body').animate({
                    scrollTop: 0
                },300); 
                return false;  
            });
        });
        </script>
    </body>
    </html>
  • 相关阅读:
    14.RabbitMQ
    13.跨域
    12.EF
    11.Redis
    GitHub获取用户ID
    10.AOP
    第26节课:pytest结合Allure操作
    第25节课:pytest测试框架
    第二十四节课:requests爬虫实战
    第二十三节课:正则表达式re模块:
  • 原文地址:https://www.cnblogs.com/bokebi520/p/4955502.html
Copyright © 2011-2022 走看看